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 padding 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;
• padding-left: pomen;

Polja:

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

Vrednosti se lahko določijo 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 pisati 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 elementa bloka se nahajata drug na drugem in imata robna polja. Zgornji blok je nastavljen na rob: 60 slikovnih pik, spodnji blok pa nastavljen na rob: 30 slikovnih pik. 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.

Razdalja med bloki je enaka večji od vrednosti

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.

Robovi in ​​oblazinjenje so zelo pomembni slogi pri izdelavi strani HTML. Omogočajo vam natančnejše pozicioniranje elementov, ustvarjanje okvirja s potrebnimi režami itd. Oba stila sta si zelo podobna in opravljata podobne funkcije. Vendar še vedno obstajajo razlike.

Elementi so lahko ugnezdeni ali postavljeni drug poleg drugega. Poglejmo si naslednji primer:

Imamo dve mizi, limonasto in modro, ki se nahajata ena pod drugo. Tabele so sestavljene iz ene celice. V prvi celici tabele je rdeč blok. Na tem primeru si poglejmo, kako delujejo robovi in ​​zamiki.

Polja so nastavljena po slogu oblazinjenje. Ta slog velja samo za elemente vsebnika, ki lahko vsebujejo druge elemente. Slog vam omogoča nastavitev roba med robovi elementa in njegovo vsebino. Slog marža omogoča nastavitev zamikov od elementa do najbližjih robov drugega elementa. Obrobe drugega elementa so lahko obrobe nadrejenega vsebnika, pa tudi robovi same strani.

Te sloge lahko nastavite na več načinov. Na primer, neposredno določite velikost vseh robov ali zamikov z enim argumentom v neki merski enoti (px, ex, em, pt, cm in tako naprej):

oblazinjenje: 3px; rob: 3px;

V tem primeru bodo robovi in ​​zamiki enaki na vseh štirih straneh. Pri podajanju dveh argumentov, ločenih s presledkom:

oblazinjenje: 3px 5px; rob: 3px 5px;

prvi bo določil količino robov/zamikov zgoraj in spodaj, drugi pa levo in desno. Ko dobimo tri argumente:

oblazinjenje: 3px 5px 2px; rob: 3px 5px 2px;

prvi je rob/vdolbina na vrhu, drugi je levo in desno, tretji je na dnu. S štirimi argumenti:

oblazinjenje: 3px 5px 2px 6px; rob : 3px 5px 2px 6px ;

prvi je rob/prostor na vrhu, drugi je na desni, tretji je na dnu, četrti je na levi. Zapomniti si ga je enostavno: prvi je od zgoraj, nato v smeri urinega kazalca. Poleg tega lahko ločeno nastavite robove in oblazinjenje za določen rob z uporabo ustreznih slogov: oblazinjenje-top, oblazinjenje-desno, oblazinjenje-dno, oblazinjenje-levo, margin-top, margin-desno, margin-bottom, rob-levo. Vrednost teh slogov je lahko samo en argument, ki določa količino roba/oblazinjenja za določeno stran.

Na sliki je rdeči blok znotraj celice tabele in ob njenih mejah, kar pomeni, da celica nima robov. Nastavimo robove celic s slogom:

oblazinjenje: 5px;

Posledično se bo stran spremenila v naslednje:

Poglejmo zdaj vdolbine. Dve tabeli ležita ena ob drugi, če ju želimo nekoliko odmakniti, lahko uporabimo zamike. Tukaj sta dve možnosti: ali nastavite spodnji zamik prve tabele ali zgornji zamik druge tabele. Uporabimo drugo:

zgornji rob: 5px;

Upoštevajte, da smo zamik nastavili posebej za tabelo in ne za celico tabele, kot je to v primeru polj. Tukaj je rezultat:

Mimogrede, v prvem primeru (vrzel med rdečim blokom in mejami nadrejene celice) bi lahko enak učinek dosegli z nastavitvijo zamikov blokov. Na splošno, če kaj ni jasno, nam to sporočite v komentarjih.

HTML koda testne strani:

<html > <glava > <naslov > Test</naslov> <meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" > </glava> <telo > <slog > tabela (širina: 200 slikovnih pik; višina: 150 slikovnih pik; obroba: 1 slikovnih pik polna #555; strnjena meja: strnjena) td (navpična poravnava: zgoraj; oblazinjenje: 0 slikovnih pik) div (širina: 100 slikovnih pik; višina: 100 slikovnih pik; ozadje: rdeče)</slog> <tabela style = "ozadje: limeta" > <tr > <td style = "padding: 5px" > <div style = "margin: 0px" ></div> </td> </tr> </tabela> <slog tabele = "ozadje: nebesno modro; zgornji rob: 5 slikovnih pik"> <tr > <td ></td> </tr> </tabela> </telo> </html> Oblazinjenje-top

Upam, da ste že seznanjeni s strukturo bloka. Če ne, je predstavljeno spodaj.

Bločna struktura

torej. Verjetno že veste, da so robovi in ​​robovi bloka predstavljeni z lastnostmi oblazinjenja in robov. In v prejšnjem članku smo se že delno dotaknili te teme. Na tej strani si bomo podrobneje ogledali polja ( oblazinjenje) in oblazinjenje ( marža ).

Lastnosti robov in oblazinjenja so si med seboj zelo podobne in opravljajo podobne funkcije, zato jih pogosto zamenjujemo. Seveda pa tega ne smete storiti, saj so robovi in ​​zamiki popolnoma različni stvari. Vendar je to jasno razvidno iz slike, saj ni naključje, da je tukaj prikazano.

torej. Robovi so določeni z lastnostjo oblazinjenja. To so notranje razdalje od meja bloka do njegove vsebine.

Lastnost velja za vse elemente.

Razdalja je določena v dolžinskih enotah CSS, % ali ( privzeto

Lastnost padding je univerzalna, ker nastavi robove od robov elementa do njegove vsebine za vse njegove strani, s čimer združuje lastnosti padding-top, padding-right, padding-bottom in padding-left, ki nastavijo širino robovi za vsak stranski element posebej.

Zamiki se nastavijo z lastnostjo roba, ki določa razdaljo od meja bloka do najbližjih elementov ali do robov okna brskalnika.

Lastnost roba velja tudi za vse elemente.

Oblazinjenje je določeno tudi v dolžinskih enotah CSS, % ali ( privzeto) brskalnik samodejno zazna.

Lastnost roba je univerzalna, saj nastavi količino zamika od robov elementa za vse njegove stranice in tako združuje lastnosti margin-top , margin-right , margin-bottom in margin-left , ki določajo širino zamikov od vsake obrobe elementa posebej.

In še nekaj: vdolbine ( marža) se nahajajo zunaj bloka, robovi ( oblazinjenje) znotraj njega, torej ozadje bloka ali njega slika ozadja velja samo za robove, zamiki pa so vedno prosojni ali imajo ozadje glavnega ( starševski) blok ali ozadje strani.

Delček kode: