CSS box model

Vse HTML elemente je mogoče obravnavati kot škatle (ang. Box). Način, kako v CSS postavljamo in oblikujemo HTML elemente, imenujemo škatlasti model (ang. Box model). V CSS vsak HTML element obrobljajo elementi škatlastega modela, ki omogočajo, da vsakemu HTML elementu dodamo obrobo in prosltor zunaj in znotraj obrobe. Ti elementi škatlastega modela so:

• Vsebina (ang. Content): besedila, slike ...
• Notranja obroba (ang. Padding): definira prostor okrog vsebine, ki je prosojen
• Obroba (ang. Border): postavljena je okrog vsebine in notranje obrobe, ima lahko različno obliko (polna črta, črtkana črta ...) in poljubno debelino
• Zunanja obroba (ang. Margin): definira prostor okrog vsebine, notranje obrobe in obrobe, zunanja obroba je prosojna

Slikovni prikaz škatlastega modela CSS

Širina in višina elementa

Da lahko v vseh brskalnikih pravilno določimo višino in širino elementa, moramo poznati delovanje škatlastega modela.

• LM - leva širina zunanje obrobe
• LB - leva širina obrobe
• LP - leva širina notranje obrobe
• ŠIRINA ELEMENTA VSEBINA - širina vsebine
• DP - desna širina notranje obrobe
• DB - desna širina obrobe
• DM - desna širina zunanje obrobe
•  
• SKUPNA ŠIRINA ELEMENTA = LM + LB + LP + ŠIRINA ELEMENTA VSEBINE + DP + DB + DM

• ZM - zgornja širina zunanje obrobe
• ZB - zgornja širina obrobe
• LP - zgornja širina notranje obrobe
• VIŠINA ELEMENTA VSEBINA - višina vsebine
• SP - spodnja širina notranje obrobe
• SB - spodnja širina obrobe
• SM - spodnja širina zunanje obrobe
•  
• SKUPNA VIŠINA ELEMENTA = LM + LB + LP + VIŠINA ELEMENTA VSEBINE + DP + DB + DM

Primer določitve širine okvirja:

<div class="okvir>Na spodnji sliki je greben Košute. Slika je široka 350px. <br />
To besedilo je široko 300px, ima notranji rob š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 rob širine 20px in obrobo širine 5px. Skupna širina okvirja je 350px.