Tags pievieno polsterējumu augšējā centrā. Mainiet polsterējumu un atstarpes augšpusē CSS

Sveiki! Sākotnēji gribēju šo rakstu sadalīt 4 mazos, bet tad pārdomāju. Priekš kam? Galu galā ir ērtāk, ja šāda informācija tiek apkopota viena materiāla ietvaros.

Tāpēc šodien mēs iemācīsimies to darīt CSS atkāpe pa kreisi un visās pārējās pusēs - pa labi, augšā un apakšā. Tos var veidot attēliem un tekstiem. Tie ir divu veidu:

• Ārējais;
• Iekšējā.

Pirmajam galvenais īpašums ir rezerve, otrajam – polsterējums. Skaidrības labad es jums izveidoju nelielu piemēru. Lai vizuāli būtu ērti atšķirt iekšējo un ārējo telpu, pievienoju redzamu tabulu. Paskatīsimies, kas notika?

Margas

Ierakstot tos CSS stila failā, var iestatīt informācijas bloka orientāciju lapā. Piemēram, es to pārvietošu pa kreisi un uz leju. Ļaujiet man nekavējoties parādīt, kā tas izskatīsies.

Parasti, lai iestatītu atkāpes, varat izmantot šādas opcijas.

Pa kreisi (marža-kreisais).

Labajā pusē (marža-pa labi).

Augšā (margin-top).

Apakšējā daļa (marža-apakša).

Tagad es jums parādīšu vēl vienu foršu niansi.

Kā redzat, varat izmantot vienu no iespējām - efekts ir vienāds. Tikai otrajā gadījumā kods izrādās kompaktāks. Ņemiet vērā arī to, ka ievilkumi ir iestatīti pulksteņrādītāja virzienā. Viss sākas augšpusē un beidzas kreisajā pusē.

Polsterējums

Šeit procedūra ir līdzīga. Tikai tagad es pievienošu jaunus rekvizītus nevis visai tabulai, bet gan kolonnu saturam.

Paskatīsimies, kas no tā sanāca.

Pēc analoģijas ar iekšējām piemalēm CSS, ārējās var rakstīt saīsinātā kodā vai malās atsevišķi.

Tie bija galvenie punkti. Visbeidzot, es jums parādīšu, kā vēl jūs varat atvieglot darbu.

Atkāpe atlasītā taga līmenī

Iepriekš redzamajos gadījumos tie ir iestatīti tekstam un attēliem vienlaikus. Faktiski jūs varat iestatīt attālumu līdz elementiem noteikta taga līmenī. Es jums parādīšu, kā tas darbojas. Es atsaucu pēdējās izmaiņas un stila failā norādu īpašo kodu.

Apskatīsim, kas notika pēc izmaiņu saglabāšanas.

Attēls palika vietā, tikai teksts, kas ietverts , tika pārvietots pa kreisi. Līdzīgas manipulācijas var pielietot arī citiem blokiem, piemēram, tr, span.

Kā papildu informāciju Iesaku izlasīt publikāciju par uzdevumu. Ir arī pietiekami aprakstīti interesanti veidi. Var noderēt sarkanas līnijas veidošanai tekstā vai citu darbību veikšanai.

Turklāt varat abonēt bezmaksas biļetenu vietnē e-pasta adreses. Emuāra abonēšanai ir īpaša forma. Tiekamies vēlāk.

Lietotāji novērtē tīmekļa resursus, pamatojoties uz tā vizuālo pievilcību. Tāpēc pat informatīvi noderīgs teksts var netikt izlasīts tāpēc, ka tas ir slikti noformēts. Secinājums - jums rūpīgi un uzmanīgi jāpieiet ne tikai vietnes lapu semantiskajam saturam, bet arī tā vizuālajam noformējumam. CSS tehnoloģijas parādīšanās ir paplašinājusi pievilcīgu rakstu veidošanas iespējas. Viens no rekvizītiem, kas izstrādāts, lai atvieglotu rakstīšanas lasīšanu, ir CSS teksta atkāpe.

Piemales un polsterējums: kāda ir atšķirība?

Pirms sākat formatēt tekstu, jums vajadzētu saprast, kas ir piemales un atkāpes. Neskatoties uz to, ka šie iezīmēšanas elementi dažos gadījumos lietotājam izskatās vienādi, starp tiem pastāv būtiskas atšķirības:

• lauku norāda rekvizīts polsterējums, atkāpe - starpība;
• malu nosaka atstarpe starp bloka saturu un apmali, atkāpi - starp blakus esošo bloku robežām;
• elementa izmēros (platumā un augstumā) var ņemt vērā vai neņemt vērā piemales.

maržas īpašums

Tātad, lai iestatītu CSS teksta horizontālo vai vertikālo atkāpi, izmantojiet konstrukciju starpība. Šis īpašums attiecas uz tagu definējot dokumenta punktu. Pašā vienkāršs gadījums tas ir rakstīts šādi:

piemale: 12 pikseļi.

Šī līnija nozīmē, ka ap teksta bloku (vai jebkuru citu bloku) no visām pusēm būs 12 pikseļu atkāpe. Lai palielinātu intervālu, piemēram, trīs reizes, vienkārši rakstiet:

piemale: 36 pikseļi.

Bet ko tad, ja intervālam starp blokiem katrā pusē jābūt atšķirīgam? Tīmekļa lapu izstrādātāji izmanto vairākus ierakstīšanas veidus:

1. piemale: 11 pikseļi 22 pikseļi.
2. piemale: 11 pikseļi 22 pikseļi 33 pikseļi.
3. piemale: 11 pikseļi 22 pikseļi 33 pikseļi 44 pikseļi.

Pirmajā piemērā 11 pikseļi tiks ievilkti no bloka apakšējās un augšējās malas un 22 pikseļi bloka malās. Saskaņā ar otro ierakstīšanas formu starp bloka augšējo malu un saturu būs 11 pikseļi, starp apakšu - 33 pikseļi, bet sānos - 22 pikseļi. Trešajā gadījumā polsterējums būs 11 pikseļi augšpusē, 22 pikseļi labajā pusē, 33 pikseļi apakšā un 44 pikseļi kreisajā pusē.

Ir iespējams arī ierakstīt attālumu līdz bloka robežai tikai vienā pusē: piemale-augšpusē, mala-apakšā, mala-kreisā, mala-labā. Tulkojot īpašumu nosaukumus krievu valodā, ir viegli uzminēt to mērķi. Piemēram, šajā ierakstā teikts, ka labā piemale būs 22 pikseļi:

mala pa labi: 22 pikseļi.

Citām pusēm attālumi ap bloku tiek pieņemti kā vienādi ar vecākelementa vērtību.

Īpašums starpība ir funkcija, kas izstrādātājam jāpatur prātā, izmantojot CSS teksta vertikālo atkāpi. Intervāli blakus esošie elementi nav summēti, bet gan uzlikti viens otram. Piemēram, ļaujiet vienam no blokiem būt piemale-apakšā: 15 pikseļi, un tam blakus esošais bloks zemāk mala augšpusē: 35 pikseļi. Skolas aritmētika un veselais saprāts liecina, ka kopējā atstarpe starp tām būs 50 pikseļi. Praksē tas tā nav. Bloks ar augstu īpašuma vērtību starpība“uzsūks” savu kaimiņu. Rezultātā atstatums starp elementiem būs 35 pikseļi.

"Sarkanā" līnija

Dokumenta sastādīšana iekšā teksta redaktors, lietotāji izvēlas norādīt katru jaunu rindkopu, izmantojot “sarkano” līniju. AR izmantojot CSS teksta atkāpe kreisajā pusē ir viegli izdarāma - tiek izmantota konstrukcija teksta atkāpe. Tas ir rakstīts šādi:

teksta atkāpe: 11 pikseļi.

Tas nozīmē, ka rindkopas pirmā rindiņa tiks nobīdīta attiecībā pret kreiso malu par 11 pikseļiem. Lai tīmekļa lapas teksts būtu vairāk līdzīgs dokumentam redaktorā, papildus jāiestata, tas ir, jāraksta:

teksta atkāpe: 11 pikseļi;

teksta līdzināšana: attaisnot.

Papildus pikseļiem, aprakstot marķējumus, ir atļauts izmantot citas mērvienības - collas, punktus, procentus. Ļaujiet blokam CSS teksta pildījumu 10%. Ja bloka platums ir 500 pikseļi, sarkanā līnija būs 50 pikseļi (10% no 500).

Šo īpašumu var iestatīt uz mantot. Šis ieraksts saka, ka bloks izmanto līdzīgu vecāku bloka rekvizītu.

teksta atkāpe: mantot.

Pārsteidzoši, tas var ņemt arī negatīvas vērtības! Šajā gadījumā tiek veidotas tā sauktās pārkares, tas ir, galvenais teksts paliek vietā, un pirmā rinda tiek pārvietota pa kreisi par 22 pikseļiem:

teksta atkāpe: -22 pikseļi.

Lai burti neizietu tālāk par pārlūkprogrammas kreiso robežu, papildus teksta atkāpe lai iestatītu lauku, jāizmanto konstrukcija:

polsterējums pa kreisi: 22 pikseļi.

Tiek apskatītas CSS pamatīpašības. Un prakse palīdzēs tos nostiprināt. Šeit ir daži pēdējie padomi, kā izmantot apgūto vietnes izstrādē.

• sarkanā līnija un teksta atkāpe ir dažādi jēdzieni, un to apzīmēšanai tiek izmantotas dažādas īpašības;
• Vertikālajiem ievilkumiem matemātikas noteikumi neattiecas - intervāli pārklājas, “uzvar” elements ar lielāku vērtību;
• negatīvs rindkopas atkāpe izmanto, lai norādītu rindkopas pirmo rindu, izmantojot attēlu.

Rekvizīts nosaka, cik daudz horizontālas teksta vietas ir jāaptver pirms teksta elementa pirmās rindiņas sākuma. Atstatumu aprēķina no elementa sākuma malas un konteinera bloka līmenim.

Tā kā liela daļa tīmekļa lapas satura ir teksta veidā, spēja veidot šo tekstu pievilcīgā un iedarbīgā veidā ir svarīga prasme, lai kļūtu par tīmekļa dizaineru. Apraksta un rindkopas atkāpei visbiežāk izmantotā un ieteicamā metode būtu izmantojot CSS. Šeit jums tiks nodrošināts dažādi piemēri par to, kā CSS var izmantot tekstam un atkāpes elementam.

Iestatiet augšējo malu, izmantojot CSS

Lai izveidotu augšējās atkāpes tiek izmantotas, tad, protams, bez CSS īpašības mēs to nevaram izdarīt, jo mums ir nepieciešams margin-top, tā ir vērtība, kuru var iestatīt dažādos veidos, piemēram, pikseļos un standarta pikseļos, em, % un tā tālāk, lai viss notiek CSS stilā vienībās mērīšana.

Lietošanas piemērs:

Margin-block(
mala augšdaļa: 50 pikseļi;
}

Ko var redzēt attēlā:

Varat to izmantot arī bloku nomešanai, šeit varat izmantot īpašumu ar nosaukumu piemale-kreisais Arī mala-labais Un piemale-apakšā. Ja mēs vienkārši norādām maržas īpašību, kur tam sākotnēji ir iespējams iestatīt 4 parametrus, šeit mēs apsvērsim pulksteņrādītāja kustības virzienu koncepcijai, kur mēs sākam no augšas ar turpinājumu zem katras malas.

piemale: 20px 50px 30px 50px;

CSS ir arī augšējais polsterējums

Gadās, ka satura elements ir jāizlīdzina vertikāli, tas ir attiecībā pret vecākbloku, šeit ir iespējams izmantot citus rekvizītus, piemēram, padding-top, kas to dara vai drīzāk iestata iekšējo polsterējumu uz augšu pēc noklusējuma. Ja mēs runājam par līdzīgām īpašībām, kuras var arī uzrakstīt un iestatīt analogā veidā, šeit ir piemale px, em, % un citās vienībās.

Piemērs:

Padding-block(
polsterējums augšpusē: 47 pikseļi;
}

Tagad mēs varam apsvērt īpašuma analogu starpība Un polsterējums, ko izmanto, lai iestatītu atkāpes citās bloka elementa pusēs, bet jau ir atsevišķi: polsterējums-pa kreisi, polsterējums-pa labi, polsterējums-apakšā. Kur uzreiz var uzstādīt sev nepieciešamo distanci, tikai uz visām pusēm, un viss būs vienlaicīgi.

polsterējums: 10 pikseļi 20 pikseļi 40 pikseļi 50 pikseļi;

Šeit jūs varat sākotnēji iestatīt vērtību kā starpība sākot, kā jūs saprotat no augšas, bet pēc tam viss notiek pulksteņrādītāja virzienā, tas ir pa labi, apakšā, pa kreisi utt.

Tagad atkarībā no dažādas situācijas, jums ir iespēja pievienot augšpusē atkāpi CSS stili, kur mēs izmantojam rekvizītus starpība Un polsterējums ka ir iespējams ievietot nepieciešamos elementus sava interneta resursa lapā, kā esat iecerējuši un jums jādara.

CSS izkārtojums vienmēr ir bijis taisnstūrveida. Visas gludas līnijas ir izstrādātāja kompetencē. Stila kārtulas nodrošina pietiekami daudz iespēju, lai piešķirtu lapai vienmērīgu formu ekrāna izšķirtspējas robežās. Bet jebkurš izkārtojuma elements vienmēr ir taisnstūris, kurā informācijas izkārtojumu regulē CSS noteikumi.

Vispusējs polsterējums ir svarīgs katram lapas elementam, ja tas ir absolūti novietots, un CSS augšējais polsterējums ir īpaši definēts, jo tas ir svarīgi dažādiem elementiem, īpaši iekļautajiem.

Pozicionēšanas pamatnoteikumi

Bloka elementam ir piemales noteikums, tajā esošo elementu polsterējuma kārtula un apmales platums, ko var arī izmantot.

Īpaši svarīgs ir ievilkums augšpusē. CSS blokā saista aizpildīšanas noteikumus ar noteikumiem par absolūti un relatīvi novietotiem elementiem šajā blokā.

Izplatīta CSS noteikumu prakse: varat norādīt polsterējumu visās pusēs vienādi, pa pāriem augšā/apakšā un labajā/kreisajā pusē vai katrai pusei atsevišķi. Piemēram,

• piemale: 10 pikseļi;
• polsterējums: 10px20px;
• polsterējums: 10px20px30px40px.

Pirmajā gadījumā tiek iestatīts elementa ievilkums no ārējā konteinera sāniem, kurā tas atrodas. Otrajā gadījumā piemales augšā un apakšā ir 10 pikseļi, kreisajā un labajā pusē - 20 pikseļi. Trešajā gadījumā ievilkumu lielums ir norādīts no visām pusēm: augšā, labajā, apakšējā un kreisajā pusē.

Visos šajos gadījumos ievilkums augšējais CSS ir 10 pikseļi.

Noteikumi, kas maina elementu novietojumu

Ja izkārtojuma elements nav novietots absolūti, tas tiek novietots vispārējā lapas veidošanas secībā.

Ja mēs definējam polsterējums augšpusē CSS scCurrInfo elementā, mērķis tiks sasniegts, bet ja li līmenī tas netiks.

Šajā piemērā, izmantojot pildījuma kārtulu: 40 pikseļi; nepieciešams atbilstoši samazināt platuma un augstuma noteikumus par 80 pikseļiem. IN citādi ScCurrInfo bloka izmērs pārsniegs ārējā bloka robežas.

Ja mēs noņemsim aizpildīšanas kārtulu no scCurrInfo apraksta, bet pievienosim to ar vērtību 20 pikseļi saraksta vienuma stila aprakstam, mēs iegūsim tikai augšējais ievilkums. CSS neizmantos šo vērtību citām pusēm.

Protams, šī atkāpes noteikuma izmantošana attiecas uz katru li elementu.

Vispārīga satura formatēšanas prakse

Daži izstrādātāji sasniedz pilnību, izkārtojot lapas, izmantojot bloku elementus. Acīmredzot tā ir klasiska prakse - sākt ar tabulām un beigt savu izglītības procesu ar blokiem.

Bloku izkārtojumam piemītošā brīvība ir aizraujoša, un izstrādātāja iztēli nedrīkst ierobežot stingri tabulas noteikumi: tikai rindas, tikai šūnas, kas apvienojas tikai horizontāli un vertikāli. Nekas raksturīgs relāciju idejām.

Tikmēr tabulām papildus acīmredzamajiem trūkumiem ir daudz kvalitatīvu priekšrocību. Veidojot polsterējumu augšpusē, CSS ņem vērā polsterējumu pa kreisi, pa labi (apakšā ir īpašs brīdis). Tabulas šūnu noteikumi ļauj kontrolēt gan vertikālo, gan horizontālo līdzinājumu. Izmantojot rindu stilus un apvienojot tos ar šūnu stiliem, varat izveidot sarežģītus satura skatus.

Parastais lapas attēlojums taisnstūru veidā nemaz neliedz to attēlot tabulas veidā. Tie ir arī taisnstūri, taču tie ir arī tabulas šūnas, tas ir, tiem ir savi noteikumi, kas papildina bloku noteikumus.

Absolūta pozicionēšana

Bloķēt ar noteikumu POSITION: absolūts ; atradīsies vietā, ko nosaka tās koordinātas attiecībā pret bloku, kurā tas atrodas.

CSS noteikumu raksturīga iezīme ir tā, ka “prakse ir labākais patiesības kritērijs” vairumā gadījumu, it īpaši, ja ir nepieciešama saderība starp pārlūkprogrammām un izkārtojums tiek veikts manuāli, labāk ir izpētīt pilnvērtīgas rokasgrāmatas kaskādes stila lapās.

Tabulu izmantošana bieži rada problēmas ar šūnu satura pārvietošanu. Līdzīga nobīde blokā ne vienmēr ietekmē visus elementus. Eksperimentējot, jūs varat sasniegt vēlamo rezultātu. Triviāls uzdevums: kā augšējā polsterējuma noņemšana ne vienmēr ir triviāls CSS risinājums.

Atsevišķos gadījumos, kad nākas izkārtot lapas elementus kādas populāras mājaslapas satura vadības sistēmas dzīlēs, tomēr ir jāpievērš uzmanība ne tikai eksperimentālai praksei, bet arī jāpaskatās kolēģu pieredze.

Veidojot vietni vai emuāru, bieži tiek izmantots bloku izkārtojums. Tā rezultātā bieži vien ir nepieciešams ievilkt blokus. Šī iemesla dēļ apmēram kā izveidot atkāpi CSS sīki aprakstīts šajā nodarbībā. Pārlūkā katrs tags ir konteiners, kuram ir saturs, polsterējums, ārējās piemales un apmale. Šajā nodarbībā mēs iemācīsimies izveidot iekšējos un ārējos ievilkumus un apsvērt to galvenos parametrus.

Zemāk esošajā attēlā ir skaidri parādīti bloka atkāpes parametri:

Kā redzat, atkāpes var veikt četros virzienos: augšējā atkāpe (augšējā), apakšējā atkāpe (apakšā), kreisais atkāpe (pa kreisi) un labais atkāpe (pa labi). Mērvienības var būt pikseļi, procenti un citas CSS vienības — uzziniet par tām vairāk. Šajā apmācībā tiek izmantoti pikseļi.

Bloku polsterējums

Īpašums, kas atbild par pildījumu CSS ir polsterējums. Tātad, aplūkosim bloka iekšējā polsterējuma iestatīšanas piemēru:

polsterējums-top: 5px; /*augšējais polsterējums*/ polsterējums-pa kreisi: 8px; /*kreisais polsterējums*/ padding-right: 8px; /*labais polsterējums*/ polsterējums-apakšā: 5px; /*apakšā polsterējums*/

Šajā piemērā polsterējums ir iestatīts atsevišķi katrai bloka pusei. Turklāt ir vairāki veidi, kā iestatīt atkāpi CSS:

piemale: 5 pikseļi 8 pikseļi 5 pikseļi 8 pikseļi; /*augšējā, labā, apakšējā, kreisā piemale*/ piemale: 5px 8px 5px; /*apraksta augšējās, kreisās, labās, apakšējās piemales*/ piemale: 5px 8px; /*apraksta augšējo un apakšējo, labās un kreisās malas*/ piemale: 7px; /*apraksta visu 7px polsterējumu*/

Vieglāk ir atcerēties pirmo un pēdējo metodi. Pirmajā gadījumā atkāpes tiek novietotas pulksteņrādītāja virzienā (augšā, pa labi, apakšā, pa kreisi) - pēdējā gadījumā varam norādīt jebkādu atkāpi, atkāpes no visām pusēm būs vienādas;

Bloku piemales

Īpašums, kas atbild par maržām CSS, ir starpība. CSS piemaļu piemēri:

mala augšpusē: 5 pikseļi; /*augšējā mala*/ kreisā mala: 10 pikseļi; /*kreisā mala*/ mala-labā: 10 pikseļi; /*labā mala*/ piemale-apakšā: 5 pikseļi; /*apakšējā mala*/

polsterējums: 5 pikseļi 10 pikseļi 5 pikseļi 10 pikseļi; /*augšējā, labā, apakšējā, kreisā piemales*/ polsterējums: 5px 10px 5px; /*apraksta augšējo, kreiso un labo, apakšējo polsterējumu*/ polsterējums: 5px 10px; /*apraksta augšējo un apakšējo, labo un kreiso polsterējumu*/ polsterējums: 7px; /*apraksta visas 7 pikseļu piemales*/

Tādējādi kā izveidot atkāpi CSS- jautājums nav grūts, bet ļoti aktuāls. Lai labāk izprastu iepriekš aprakstīto informāciju, jāatceras, ka ir divi rekvizīti: polsterējums — iekšējās atkāpes un piemale — ārējās atkāpes. Tāpat, kā jūs jau zināt, ir vairāki veidi, kā iestatīt atkāpes, varat tos izmantot.