Šta je kutija model, od čega se sastoji i koji su…

Боксовая модель (CSS Box Model) — это апстрактна ентитет, који описује како се HTML елементи приказују на страници као правоугаони блокови. Она одређује величину и распоред садржаја, унутрашњих размака, граница и спољашњих размака елемента.

Боксовая модель се састоји од следећих делова:

Content: садржај елемента (текст, слике итд.). Његова величина се одређује својствима width и height.
Padding: простор између садржаја елемента и његове границе. Одређује се својствима padding-top, padding-right, padding-bottom, padding-left или кратким својством padding.
Border: граница око унутрашњег размакa и садржаја. Одређује се својствима border-width, border-style, border-color или кратким својством border.
Margin: простор између границе елемента и спољашњих елемената. Одређује се својствима margin-top, margin-right, margin-bottom, margin-left или кратким својством margin.

Постоје две главне врсте боксове моделе, одређене својством box-sizing:

content-box (стандардна вредност): Ширина и висина елемента, задати својствима width и height, односе се само на област садржаја. Padding и Border се додају овим величинама, повећавајући укупну величину елемента.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Додаје 20px укупној величини по свакој оси */
  border: 2px solid black; /* Додаје 4px укупној величини по свакој оси */
  box-sizing: content-box; /* Стандардно понашање */
}
/* Укупна величина елемента ће бити 124px на 124px */

border-box: Ширина и висина елемента, задати својствима width и height, укључују садржај, padding и border. Padding и Border не повећавају укупну величину елемента, већ "смањују" област садржаја.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Укључено у укупну ширину/висину */
  border: 2px solid black; /* Укључено у укупну ширину/висину */
  box-sizing: border-box;
}
/* Укупна величина елемента ће бити 100px на 100px */

Чешће се користи border-box за предвидљивије понашање величина елемената приликом додавања padding и border. Ово је погодно, на пример, при креирању адаптивних распореда, где елементи треба да заузимају одређену проценатну ширину.

Šta je kutija model, od čega se sastoji i koji su njegovi tipovi?