CSS box model

Vsak viden HTML element lahko obravnavamo kot pravokotno škatlo. Način, kako CSS določa velikost elementa, prostor okoli vsebine in obnašanje obrobe, imenujemo škatlasti model oziroma box model. Razumevanje škatlastega modela je pomembno zato, ker vpliva na širino, višino in razporeditev elementov na strani.

Pomni: Škatlasti model sestavljajo štirje osnovni deli: vsebina, notranji odmik, obroba in zunanji odmik.

Osnovna pravila

Vsako škatlo v CSS sestavljajo štirje osnovni deli:

Vsebina (content) – besedilo, slike in druga vsebina elementa
Notranji odmik (padding) – prostor okoli vsebine, znotraj obrobe
Obroba (border) – črta ali drugačna meja okoli vsebine in notranjega odmika
Zunanji odmik (margin) – prostor zunaj obrobe

Lastnost box-sizing določa, kako se izračunata skupna širina in višina elementa. Privzeta vrednost je content-box, pri kateri se width in height nanašata samo na vsebino. Pri vrednosti border-box pa navedena širina in višina vključujeta tudi notranji odmik in obrobo.

Slikovni prikaz škatlastega modela CSS

Širina in višina elementa

Da lahko pravilno določimo širino in višino elementa, moramo razumeti, kaj vrednosti width in height dejansko pomenita. V privzetem modelu content-box širina in višina veljata samo za vsebino. Notranji odmik in obroba se prištejeta k skupni velikosti elementa, zunanji odmik pa se doda šele zunaj elementa.

LM – leva zunanja obroba (margin-left)
LB – leva obroba (border-left)
LP – levi notranji odmik (padding-left)
ŠIRINA VSEBINE – širina vsebine elementa
DP – desni notranji odmik (padding-right)
DB – desna obroba (border-right)
DM – desna zunanja obroba (margin-right)
SKUPNA ŠIRINA ELEMENTA = LM + LB + LP + ŠIRINA VSEBINE + DP + DB + DM

ZM – zgornja zunanja obroba (margin-top)
ZB – zgornja obroba (border-top)
ZP – zgornji notranji odmik (padding-top)
VIŠINA VSEBINE – višina vsebine elementa
SP – spodnji notranji odmik (padding-bottom)
SB – spodnja obroba (border-bottom)
SM – spodnja zunanja obroba (margin-bottom)
SKUPNA VIŠINA ELEMENTA = ZM + ZB + ZP + VIŠINA VSEBINE + SP + SB + SM

Pozor: Navpični zunanji odmiki sosednjih blokovnih elementov se lahko združijo. To pomeni, da se v nekaterih primerih zgornji in spodnji margin ne seštevata, ampak se uporabi le večji odmik. To velja v navpični smeri in ne velja za elemente v vsebnikih flex ali grid.

Primer privzetega modela `content-box`

V spodnjem primeru ima element širino vsebine 300px, levi in desni notranji odmik po 20px ter obrobo debeline 5px. Ker uporabljamo privzeti model content-box, je skupna širina elementa:

300 + 20 + 20 + 5 + 5 = 350px

<div class="okvir">Na spodnji sliki je greben Košute. Slika je široka 350px.<br />
To besedilo je široko 300px, ima notranji odmik širine 20px in obrobo širine 5px.
Skupna širina okvirja je 350px.</div>
<img src="kosuta.jpg" width="350" height="205" alt="Veriga Košute" />

.okvir { 
   width: 300px; 
   background-color: #FDB835; 
   padding: 20px; 
   border: 5px solid #9D9D9D; 
}

Na spodnji sliki je greben Košute. Slika je široka 350px.
To besedilo je široko 300px, ima notranji odmik širine 20px in obrobo širine 5px. Skupna širina okvirja je 350px.

Pomni: Pri privzetem modelu content-box vrednost width določa samo širino vsebine, ne pa tudi notranjega odmika in obrobe.

Primer sodobnega pristopa z `box-sizing: border-box`

Pri box-sizing: border-box navedena širina že vključuje vsebino, notranji odmik in obrobo. Če nastavimo width: 350px, bo skupna širina elementa brez zunanjih odmikov ostala 350px. Tak pristop je v praksi pogosto bolj predvidljiv in poenostavi računanje dimenzij pri postavitvah.

.okvir-border-box {
   box-sizing: border-box;
   width: 350px;
   background-color: #FDB835;
   padding: 20px;
   border: 5px solid #9D9D9D;
}

Ta okvir uporablja box-sizing: border-box. Širina 350px že vključuje vsebino, notranji odmik in obrobo.

Številni projekti danes uporabljajo tudi globalno pravilo, kot je:

*,
*::before,
*::after {
   box-sizing: border-box;
}

S tem je računanje širine in višine elementov pogosto preprostejše in bolj pregledno.

Priporočila

Pri načrtovanju postavitve vedno preveri, ali se width in height nanašata samo na vsebino ali tudi na notranji odmik in obrobo.
Za preglednejše računanje dimenzij pogosto uporabi box-sizing: border-box.
Pri zunanjem odmiku upoštevaj, da se lahko navpični odmiki nekaterih blokovnih elementov združijo.
Pri razlagi škatlastega modela ločuj med vsebino, notranjim odmikom, obrobo in zunanjim odmikom.

Pogoste napake

Skupna širina elementa se računa, kot da notranji odmik in obroba pri modelu content-box ne vplivata na končno velikost.
Zunanji odmik se razume kot del notranjosti elementa, čeprav je zunaj obrobe.
Pri navpičnih odmikih se pričakuje, da se bodo vedno sešteli.
Lastnost box-sizing ni upoštevana pri načrtovanju postavitve.

Nazaj

Naprej