Čo je to box model v CSS?

V CSS modeli box opisuje pravougaonu oblast koja se generiše za svaki element i koristi se za izračunavanje njegovih dimenzija i položaja. Sastoji se od četiri dela:

• Kutija sadržaja: Oblast gde se prikazuje sadržaj elementa (tekst, slike itd.). Njegova veličina se određuje svojstvima width i height.
• Padding kutija: Prostor između granice sadržaja i granice elementa. Veličina se određuje svojstvom padding. Boja pozadine i slika elementa se šire na ovu oblast.
• Granica kutija: Granica elementa koja okružuje padding kutiju. Veličina se određuje svojstvima border.
• Margin kutija: Prostor oko granice elementa, koji ga odvaja od drugih elemenata. Veličina se određuje svojstvom margin. Ova oblast je uvek potpuno providna.

Standardna veličina elementa se računa na sledeći način:

širina = width + padding-left + padding-right + border-left-width + border-right-width
visina = height + padding-top + padding-bottom + border-top-width + border-bottom-width

Svojstvo box-sizing omogućava promenu ovog modela:

• content-box (podrazumevano): Dimenzije width i height odnose se samo na sadržajni box.
• border-box: Dimenzije width i height uključuju padding i border.

.element-default {
  width: 100px; /* Širina sadržajnog boxa = 100px */
  padding: 10px;
  border: 5px solid black;
  /* Stvarna širina elementa: 100 + 10 + 10 + 5 + 5 = 130px */
}

.element-border-box {
  width: 100px; /* Stvarna širina elementa = 100px */
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
  /* Širina sadržajnog boxa: 100 - 10 - 10 - 5 - 5 = 70px */
}