Šta je model kutije u CSS-u?

CSS model blokova opisuje kako se elementi prikazuju na stranici kao pravougaoni blokovi. Sastoji se od četiri zone ili sloja koji se preklapaju počevši od sadržaja:

1. Content (Sadržaj): Oblast gde se nalazi stvarni sadržaj elementa (tekst, slike itd.). Njegova veličina se određuje svojstvima width i height.

2. Padding (Unutrašnji razmak): Providna oblast između sadržaja i granice elementa. Postavlja se svojstvima padding-top, padding-right, padding-bottom, padding-left ili skraćenicom padding.

3. Border (Granica): Linija koja okružuje Padding i Content. Stil, debljina i boja se podešavaju svojstvima border-width, border-style, border-color ili skraćenicama, na primer border.

4. Margin (Spoljašnji razmak): Providna oblast oko granice elementa, koja ga odvaja od drugih elemenata. Postavlja se svojstvima margin-top, margin-right, margin-bottom, margin-left ili skraćenicom margin. Margine susednih blokova mogu se slepljivati.

Standardno ponašanje, opisano sa box-sizing: content-box (po defaultu), definiše da svojstva width i height odnose samo na sadržaj bloka (Content). Padding i Border se dodaju ovom dimenziji, povećavajući ukupnu veličinu elementa.

Korišćenjem box-sizing: border-box, svojstva width i height uključuju Content, Padding i Border. Margin se uvek dodaje ukupnoj veličini elementa, bez obzira na box-sizing.

Primer:

div {
  width: 100px; /* Širina Content (za content-box) ili cele elementa (za border-box) */
  height: 50px; /* Visina Content (za content-box) ili cele elementa (za border-box) */
  padding: 10px; /* Unutrašnji razmak */
  border: 2px solid black; /* Granica */
  margin: 15px; /* Spoljašnji razmak */
}

U zavisnosti od vrednosti box-sizing, stvarne dimenzije elementa će biti različite.

• box-sizing: content-box: Stvarna širina = 100px (Content) + 10px (Padding-left) + 10px (Padding-right) + 2px (Border-left) + 2px (Border-right) = 124px. Stvarna visina = 50px (Content) + 10px (Padding-top) + 10px (Padding-bottom) + 2px (Border-top) + 2px (Border-bottom) = 74px.
• box-sizing: border-box: Stvarna širina = 100px (Content + Padding + Border). Stvarna visina = 50px (Content + Padding + Border).

Spoljašnji razmak margin: 15px dodaje se oko ove ukupne veličine.