Šta je model kutije u CSS-u?

CSS модел kutije opisuje kako se računa prostor koji element zauzima na veb stranici. Uključuje:

• Sadržaj: Oblast za stvarni sadržaj elementa (tekst, slike).
• Padding (unutrašnje margine): Prostor između sadržaja i granice elementa.
• Border (okvir): Granica koja okružuje padding i sadržaj.
• Margin (spoljna margina): Prostor oko granice elementa, koji ga odvaja od drugih elemenata.

Podrazumevana veličina elementa (u standardnom modelu box-sizing: content-box) određuje se zbirom veličina sadržaja, paddinga i border-a. Margin se dodaje ukupnom prostoru, ali ne utiče na veličinu samog elementa.

Svojstvo box-sizing: border-box menja računanje veličine elementa, uključujući padding i border u ukupnu širinu i visinu. U ovom slučaju, veličina elementa se određuje putem width/height, a padding i border "troše" prostor unutar sadržaja.

/* Standardni model (podrazumevani) */
.element-content-box {
  width: 100px; /* Veličina sadržaja */
  padding: 10px;
  border: 5px solid black;
  /* Ukupna širina: 100px (sadržaj) + 10px (padding levo) + 10px (padding desno) + 5px (border levo) + 5px (border desno) = 130px */
}

/* border-box model */
.element-border-box {
  width: 100px; /* Ukupna širina: sadržaj + padding + border */
  padding: 10px;
  border: 5px solid black;
  /* Veličina sadržaja: 100px - 10px (padding levo) - 10px (padding desno) - 5px (border levo) - 5px (border desno) = 70px */
}

Razumevanje modela kutije je ključno za precizno pozicioniranje i sastavljanje elemenata na stranici.