Relativna vrednost oblazinjenja. Kako nastaviti rob in oblazinjenje CSS (in kul nasveti za postavitev). Kaj si zapomniti

Od avtorja: Ko sem se prvič začel učiti CSS, sem bil ves čas zmeden glede robov in oblazinjenja. Zdeli so se zelo podobni in v nekaterih primerih so dali enak rezultat. V tej vadnici boste videli razliko med robom CSS in oblazinjenjem ter kako te lastnosti vplivajo na prostor med elementi na strani. Razpravljali bomo tudi o strnjevanju robov in uporabi različnih merskih enot pri izdelavi odzivnih spletnih strani. Članek bomo zaključili z nekaj nasveti o postavitvi z uporabo robov in oblazinjenja.

Blok model

Elementi v CSS so predstavljeni kot pravokotni okvirji. Velikost pravokotnega bloka določajo lastnosti elementa: vsebina, oblazinjenje, okvir, rob.

Območje vsebine elementa se nahaja na sredini. Nato oblazinjenje obdaja področje vsebine. Okvir obdaja oblazinjenje, rob pa je zunanji sloj, tj. je zunaj elementa. Da bi bolje razumeli, o čem govorimo, je spodaj diagram.

Kot lahko vidite iz diagrama, je oblazinjenje plast, ki razširja element od zunanjega roba področja vsebine do notranjega roba okvirja. Ta lastnost nadzoruje razdaljo med robom elementa in njegovo vsebino. Oblazinjenje vpliva na velikost elementa na strani, ne vpliva pa na razmik med elementi na strani.

Če morate povečati ali zmanjšati razdaljo med elementi, uporabite rob. Lastnost roba na noben način ne vpliva na velikost elementa.

Pomembno si je zapomniti, da so velikosti vseh blokov na spletni strani odvisne od uporabljenega modela blokov. Obstajata dva modela blokov: model blokov W3C, tradicionalni model blokov.

V skladu z modelom blokov W3C se širina elementa izračuna iz vsebine bloka brez upoštevanja oblazinjenja in robov. Na vrhu sta dodana oblazinjenje in obroba dane dimenzije, kar lahko povzroči nepričakovane posledice za postavitev strani.

Na primer, vzemimo blok s širino 200 slikovnih pik in višino 200 slikovnih pik, odmikom 10 slikovnih pik na vseh straneh in robom 2 slikovnih pik na vseh straneh. Brskalnik ne vidi bloka 200px. Brskalnik izračuna vodoravni prostor, potreben za prikaz bloka, in je 224 slikovnih pik: 200 (širina) + 2 (leva obroba) + 10 (leva obroba) + 10 (desna obroba) + 2 (desna obroba) = 224 slikovnih pik. Ker je kvadrat, bo tudi višina 224 slikovnih pik.

Po drugi strani pa tradicionalni blokovni model kot širino vzame vsoto vsebine, oblazinjenja in obrobe. To pomeni, da če je vaš blok širok 200 slikovnih pik, bo brskalnik izračunal vodoravni prostor, potreben za njegov prikaz, in bo znašal 200 slikovnih pik, vključno z oblazinjenjem in obrobo. Rezultat je bolj predvidljiv in z njim je lažje delati.

Vsi brskalniki privzeto uporabljajo blokovni model W3C. Model je mogoče nastaviti ročno z lastnostjo box-sizing. Sprejeti sta dve vrednosti: content-box (W3C) in border-box (tradicionalni model). Tradicionalni model je bolj intuitiven, zaradi česar je najbolj priljubljen med spletnimi razvijalci.

Tukaj je opisano, kako uporabite velikost škatle za uporabo tradicionalnega modela v vašem projektu:

html ( box-sizing: border-box; ) *, *:before, *:after ( box-sizing: inherit; )

Če si stvari zapomnite hitreje, ko stvari počnete sami, poskusite eksperimentirati z zabavno interaktivno predstavitvijo Guya Routledgea.

Nastavitev roba in oblazinjenja

Z lastnostmi padding-top, padding-desno, padding-bottom in padding-left lahko nadzirate oblazinjenje na vseh štirih straneh elementa. Oblazinjenje je mogoče določiti tudi s skrajšano lastnostjo. Če je zapisana ena sama vrednost oblazinjenja, jo CSS uporabi za določitev oblazinjenja za vse 4 strani:

/* vse 4 strani */ oblazinjenje: 10px;

Če so predstavljene 3 vrednosti, je prva odgovorna za vrh, druga za levo in desno ter tretja za dno:

/* vrh | vodoravno | spodaj */ oblazinjenje: 1em 20px 2em;

Če so predstavljene vse 4 vrednosti, je vsaka odgovorna za zgoraj, desno, spodaj in levo:

/* vrh | desno | dno | levo */ oblazinjenje: 10px 10% 2em 15%;

V predstavitvi spodaj je oranžno ozadje območje vsebine za različne elemente, belo območje med okvirjem in vsebino je oblazinjenje:

Zunanji rob, tako kot oblazinjenje, je mogoče nadzorovati na vseh 4 straneh z uporabo lastnosti margin-top, margin-desno, margin-bottom in margin-left. Z lastnostjo stenografije lahko nastavite tudi rob za vse 4 strani hkrati.

/* vse 4 strani */ margin: 10px; /* navpično | vodoravno */ rob: 2em 4em; /* vrh | vodoravno | spodaj */ rob: 2em samodejno 2em; /* vrh | desno | dno | levo */ rob: 10px 10% 2em 15%;

Kaj si zapomniti

Uporabite pravilne merske enote

Pri delu z oblazinjenjem in robom se izogibajte absolutnim merskim enotam. Takšne enote se ne prilagajajo spremembam velikosti pisave in širine zaslona.

Recimo, da nastavite širino elementa na 50 % in rob na 15 slikovnih pik. Pri širini 1200 slikovnih pik bo širina elementa 600 slikovnih pik, rob pa 15 slikovnih pik. Pri širini 769 slikovnih pik bo širina elementa 384 slikovnih pik, rob pa bo še vedno 15 slikovnih pik.

Širina elementa se je spremenila za 36 %, rob pa je ostal enak. V večini primerov to ni največji problem. Če pa maržo elementa nastavite na odstotek, boste imeli večji nadzor nad postavitvijo strani na vseh zaslonih. Vse bo videti sorazmerno brez nenadnih skokov v uporabljenih vrednostih robov in oblazinjenja.

Podobno boste morda želeli dodati oblazinjenje elementom besedila na strani. V večini primerov želite, da je oblazinjenje sorazmerno z velikostjo pisave na elementu. To je nemogoče narediti v absolutnih enotah. Če pa oblazinjenje nastavite na em, se bo samodejno prilagodilo velikosti pisave. Spodnja predstavitev prikazuje skaliranje v akciji.

Kako brskalniki izračunajo rob in polnjenje za različne merske enote

Brskalniki različno izračunajo končne vrednosti marže in oblazinjenja glede na merske enote.

Rob in oblazinjenje, podani v odstotkih, se izračunata glede na širino vsebnika. To pomeni, da bo 5 % oblazinjenje enako 5 slikovnih pik, če je širina vsebnika 100 slikovnih pik, ali 50 slikovnih pik, če je širina vsebnika 1000 slikovnih pik. Ne pozabite, da sta zgornja in spodnja vrednost izračunani tudi glede na širino posode.

V primeru em rob in oblazinjenje temeljita na velikosti pisave elementa. V prejšnji predstavitvi je oblazinjenje spodnjih treh besedilnih elementov 1em. Zaradi različnih velikosti pisave bo izračunana vrednost oblazinjenja vedno drugačna.

Obstajajo tudi 4 merske enote vidnega polja vw, vh, vmin in vmax. V tem primeru bodo vrednosti roba in oblazinjenja odvisne od vidnega polja. Na primer, odmik 5vw bo enak 25 slikovnih pik s širino vidnega polja 500 slikovnih pik, odmik 10vw pa bo enak 50 slikovnih pik na istem vidnem polju. Te merske enote lahko podrobneje preučite v članku na spletnem mestu SitePoint »CSS Viewport of Units of Measure: Quick Start«.

Če ste začetnik, vam bo poznavanje delovanja teh enot pomagalo hitro razumeti, zakaj se oblazinjenje in robovi elementov HTML spreminjajo glede na velikost nadrejenega elementa, pisave ali celo vidnega polja. To vam bo dalo možnost nadzora nad vašo postavitvijo.

Zrušitev robov

Prav tako morate vedeti o konceptu strnjenih robov. V določenih situacijah se lahko zgornji in spodnji rob dveh elementov strneta v enega. Ta pojav imenujemo zlom marže.

Recimo, da imate dva elementa enega pod drugim, tj. na isti ravni. Če nastavite margin-bottom 40px za prvi element in margin-top 25px za drugega, potem skupni rob med elementi ne bo enak 65px. Vdolbina bo enaka vrednosti večjega roba, tj. 40 slikovnih pik.

Podobno se lahko marža zruši med nadrejenim in prvim ali zadnjim otrokom. To se zgodi, če ni obrobe, oblazinjenja ali vstavljene vsebine, ki ločuje podrejeni in nadrejeni rob. V tem primeru, če na nadrejenem elementu ni oblazinjenja ali obrobe, bo rob podrejenega elementa "tekel" iz nadrejenega.

To vedenje je mogoče popraviti. Če želite to narediti, morate dodati pregrado med nadrejenim in podrejenim robom. Spodnja predstavitev prikazuje, kako lahko težavo odpravite z dodajanjem obrobe ali oblazinjenja nadrejenemu elementu.

V primeru negativnih marž je končna vrednost strnjene marže enaka vsoti pozitivnega marže z najmanjšo negativno maržo. Temo strnjenih robov lahko podrobneje preučite v članku Adama Robertsa "Strnjeni robovi".

Zanimivi načini uporabe robov in oblazinjenja

Včasih lahko rob in oblazinjenje pomagata rešiti težave s postavitvijo. Spodaj je nekaj primerov:

Ohranite razmerje stranic na slikah

Pogosto imajo slike na strani različna razmerja stranic. Če želite prikazati vse slike z enakim razmerjem stranic, vam bo v pomoč oblazinjenje CSS.

Če želite to narediti, morate višino nadrejenega elementa nastaviti na nič, lastnost padding-top nadrejenega elementa pa mora biti enaka vrednosti razmerja stranic, izraženi v odstotkih.

Na primer, razmerje stranic 16:9 se doseže z oblazinjenjem: 56,25% 0 0 0. Vrednost 56,25 se pridobi z (9/16)*100. S to metodo lahko izračunate odstotke zapolnitve za katero koli drugo razmerje stranic.

Zaključek

Če se šele začenjate učiti CSS, upam, da vam je ta vadnica pomagala razumeti razliko med robom in oblazinjenjem. Naučiti se morate nastaviti rob in oblazinjenje z uporabo okrajšav in ustreznih merskih enot. V zadnjem delu sem pokazal dva zanimive načine uporabo lastnosti v postavitvah in vam ponudil tudi povezave do virov za nadaljnje učenje. Če imate druge nasvete o robovih in oblazinjenju CSS, jih objavite v komentarjih.

Opis

Nastavi vrednost robov okoli vsebine elementa. Rob je razdalja od notranjega roba okvirja elementa do namišljenega pravokotnika, ki omejuje njegovo vsebino (slika 1).

Lastnost oblazinjenja vam omogoča, da nastavite vrednost oblazinjenja za vse strani elementa hkrati ali jo definirate samo za določene strani.

Sintaksa

oblazinjenje: [vrednost | odstotkov] (1, 4) | dedovati

Vrednote

Uporabite lahko eno, dve, tri ali štiri vrednosti, ločene s presledkom. Učinek je odvisen od števila vrednosti in je prikazan v tabeli. 1.

Velikost polj je mogoče določiti v slikovnih pikah (px), odstotkih (%) ali drugih enotah, sprejemljivih za CSS. Podedovana vrednost označuje, da je podedovana od starša. Pri podajanju roba v odstotkih se vrednost izračuna iz širine nadrejenega elementa.

HTML5 CSS2.1 IE Cr Op Sa Fx

Rezultat ta primer prikazano na sl. 2.

riž. 2. Uporaba lastnosti oblazinjenja

Objektni model

document.getElementById("elementID ").style.padding

Brskalniki

Različice Internet Explorerja do vključno 7.0 ne podpirajo podedovane vrednosti.

V prejšnjem poglavju smo jih omenili Lastnosti CSS, kot sta rob (polje) in odmik (zamik). Zdaj si jih bomo podrobneje ogledali in razmislili, kako se med seboj razlikujejo in kakšne lastnosti imajo.

Presledke med elementi lahko ustvarite na tak ali drugačen način, a če je oblazinjenje zamik od vsebine do roba bloka, potem je rob razdalja od enega bloka do drugega, medblokovni prostor. Posnetek zaslona prikazuje jasen primer:

Oblazinjenje ločuje vsebino od roba bloka, rob pa ustvarja vrzeli med bloki

Kot lahko vidite, se robovi in ​​oblazinjenje CSS med seboj razlikujejo, čeprav včasih brez pogleda kode ni mogoče ugotoviti, katera lastnost se uporablja za nastavitev razdalje. To se zgodi, če manjka okvir ali ozadje bloka vsebine.

Obstajajo naslednje lastnosti za nastavitev robov ali oblazinjenja v CSS na vsaki strani elementa:

Oblazinjenje:

• oblazinjenje: pomen;
• oblazinjenje-desno: pomen;
• oblazinjenje-dno: pomen;
• oblazinjenje-levo: pomen;

Polja:

• rob zgoraj: pomen;
• rob-desno: pomen;
• margin-bottom: pomen;
• rob-levo: pomen;

Vrednosti lahko določite v poljubnih enotah CSS - px, em, % itd. Primer: margin-top: 15px .

Obstaja tudi zelo priročna stvar, kot je okrajšava za rob in oblazinjenje CSS. Če morate nastaviti robove ali oblazinjenje na vseh štirih straneh elementa, vam ni treba nujno napisati lastnosti za vsako stran posebej. Vse je poenostavljeno: za rob in oblazinjenje lahko določite 1, 2, 3 ali 4 vrednosti hkrati. Število vrednosti določa, kako so nastavitve porazdeljene:

• 4 vrednosti: oblazinjenje je nastavljeno za vse strani elementa v naslednjem zaporedju: zgoraj, desno, spodaj, levo: oblazinjenje: 2px 4px 5px 10px;
• 3 vrednosti: oblazinjenje se nastavi najprej za zgornjo stran, nato hkrati za levo in desno ter nato za dno: oblazinjenje: 3px 6px 9px;
• 2 vrednosti: oblazinjenje se nastavi najprej istočasno z zgornje in spodnje strani, nato pa hkrati še levo in desno: oblazinjenje: 6px 12px;
• 1 vrednost: enaka dolžina je nastavljena za vse strani elementa: dolžina: 3px;

Ista pravila veljajo za lastnost roba CSS. Upoštevajte, da lahko uporabite tudi negativne vrednosti za rob (na primer -3px), kar je lahko včasih zelo koristno.

Strni rob

Predstavljajte si situacijo: dva blok element se nahajajo ena na drugi in imajo polja robov. Za zgornji blok Vrednost je nastavljena na margin: 60px, spodnji pa na margin: 30px. Logično bi bilo domnevati, da se bosta mejni polji dveh elementov preprosto dotaknili in posledično bo razmik med bloki enak 90 pikslov.

Vendar pa so stvari drugačne. Pravzaprav se v takšni situaciji pojavi učinek, ki se imenuje kolaps, ko je iz dveh sosednjih polj elementov izbran največji po velikosti. V našem primeru bo končna vrzel med elementi 60 slikovnih pik.

Strnjeni rob deluje samo za zgornje in spodnje robove elementov in ne velja za robove na desni in levi strani. Končna vrednost vrzeli se v različnih situacijah izračuna različno:

• Ko sta obe vrednosti marže pozitivni, bo nastala velikost marže enaka večji vrednosti.
• Če je ena od vrednosti negativna, morate za izračun velikosti polja dobiti vsoto vrednosti. Na primer, z vrednostmi 20px in -18px bo velikost polja:
  20 + (-18) = 20 – 18 = 2 slikovni piki.
• Če sta obe vrednosti negativni, se primerjata modula teh števil in izbere se število z večjim modulom (torej manjše od negativnih števil). Primer: primerjati morate vrednosti polj -6px in -8px. Modula primerjanih števil sta 6 oziroma 8. Iz tega sledi, da je 6-8. Velikost dobljenega polja je -8 slikovnih pik.
• V primeru, da so vrednosti navedene v različne enote CSS, se zmanjšajo na eno, nakar se primerjajo in izbere večja vrednost.
• Velikost roba za podrejene elemente je določena na še bolj zanimiv način: če ima podrejeni element večji rob kot njegov nadrejeni element, ima prednost le-ta. V tem primeru bosta velikosti zgornjega in spodnjega roba nadrejenega elementa enaki tistima, določenima za podrejenega. V tem primeru med staršem in otrokom ne bo razdalje.

Opis

Nastavi vrednost robov okoli vsebine elementa. Rob je razdalja od notranjega roba okvirja elementa do namišljenega pravokotnika, ki omejuje njegovo vsebino (slika 1).

Lastnost oblazinjenja vam omogoča, da nastavite vrednost oblazinjenja za vse strani elementa hkrati ali jo definirate samo za določene strani.

Sintaksa

oblazinjenje: [vrednost | odstotkov] (1, 4) | dedovati

Vrednote

Uporabite lahko eno, dve, tri ali štiri vrednosti, ločene s presledkom. Učinek je odvisen od števila vrednosti in je prikazan v tabeli. 1.

Velikost polj je mogoče določiti v slikovnih pikah (px), odstotkih (%) ali drugih enotah, sprejemljivih za CSS. Podedovana vrednost označuje, da je podedovana od starša. Pri podajanju roba v odstotkih se vrednost izračuna iz širine nadrejenega elementa.

HTML5 CSS2.1 IE Cr Op Sa Fx

Rezultat tega primera je prikazan na sl. 2.

riž. 2. Uporaba lastnosti oblazinjenja

Objektni model

document.getElementById("elementID ").style.padding

Brskalniki

Različice Internet Explorerja do vključno 7.0 ne podpirajo podedovane vrednosti.

Naj vam takoj povem – to je zelo pomembna lekcija. Ko ga preučite, boste lahko postavili elemente na stran, nastavili zamike med njimi, jih ustvarili znotraj ločenega specifičnega bloka in nastavili robove.

oblazinjenje

Oblazinjenje je lastnost, ki nastavi količino oblazinjenja elementa od notranjega roba obrobe do vsebine. Vsebina je lahko navadno besedilo, slika ali podrejeni element, ki ima lahko tudi svoja polja.

Enote so lahko slikovne pike (px) ali odstotki (%).

#blokiraj (
oblazinjenje: 12px; /* zamik od robov bloka do vsebine - 12 slikovnih pik na vseh straneh */
}

Polje je mogoče določiti samo na eni določeni strani:

oblazinjenje-top- lastnost, ki ustvarja polja na vrhu.
oblazinjenje-desno- lastnost, ki ustvarja polja na desni.
oblazinjenje-dno- lastnost, ki ustvarja polja na dnu.
oblazinjenje-levo- lastnost, ki ustvarja polja na levi.

#blokiraj (
oblazinjenje-dno: 25px; /* spodnji rob 25 slikovnih pik */
oblazinjenje-levo: 15px; /* levi rob 15 slikovnih pik */
}

Kot ste opazili, če na ta način določite polja na 2 ali 3 straneh, boste dobili dolgo kodo. V ta namen obstaja okrajšava za lastnost oblazinjenja. Označuje vse 4 vrednosti po vrsti - od vsakega roba v eni vrstici, gibanje poteka v smeri urinega kazalca, začenši od vrha:

Oblazinjenje: TopPadding RightPadding PaddingBottom PaddingLeft;

#blokiraj (
oblazinjenje: 25px 10px 15px 6px; /* zgoraj 25px, desno 10px, spodaj 15px, levo 6px */
}

marža

Lastnost roba za razliko od oblazinjenja nastavi količino zamika med robovi elementov.
Če je element podrejeni, je oblazinjenje prostor od roba elementa do notranjega roba nadrejenega roba.
Če element nima nadrejenega elementa, je vdolbina prosti prostor, ki ga lastnost nastavi na robove okvirja okoliških elementov.

#blokiraj (
rob: 4px;
}

Če želite določiti zamik samo na določenih straneh, obstajajo naslednje lastnosti:

margin-top- lastnost, ki ustvarja vdolbine na vrhu.
margin-desno- lastnost, ki ustvarja vdolbino na desni.
margin-bottom- lastnost, ki ustvarja vdolbine na dnu.
rob-levo- lastnost, ki ustvari levi zamik.

Tako kot lastnost oblazinjenja ima tudi rob možnost skrajšati vrednosti za različne strani. Gibanje poteka v smeri urinega kazalca, od zgornjega polja:

Rob: TopMargin RightMargin Margin Bottom Margin Left;

#blokiraj (
rob: 15px 10px 5px 25px; /* zgoraj 15px, desno 10px, spodaj 5px, levo 25px */
}

Hvala za vašo pozornost!