Какво е моделът на кутията в CSS?

CSS моделът на кутията описва как се изчислява пространството, което заема един елемент на уеб страница. Той включва:

• Съдържание: Зоната за реалното съдържание на елемента (текст, изображения).
• Padding (вътрешни отстояния): Пространството между съдържанието и границата на елемента.
• Border (рамка): Границата, която обгражда padding и съдържанието.
• Margin (външни отстояния): Пространството около границата на елемента, отделящо го от други елементи.

Стандартният размер на елемента (в стандартния модел box-sizing: content-box) се определя от сумата на размерите на съдържанието, padding и border. Margin се добавя към общото пространство, но не влияе на размера на самия елемент.

Свойството box-sizing: border-box променя изчислението на размера на елемента, като включва padding и border в общата ширина и височина. В този случай размерът на елемента се определя от width/height, а padding и border "запълват" място в съдържанието.

/* Стандартен модел (по подразбиране) */
.element-content-box {
  width: 100px; /* Размер на съдържанието */
  padding: 10px;
  border: 5px solid black;
  /* Общата ширина: 100px (съдържание) + 10px (padding наляво) + 10px (padding надясно) + 5px (рамка наляво) + 5px (рамка надясно) = 130px */
}

/* Модел border-box */
.element-border-box {
  width: 100px; /* Общата ширина: съдържание + padding + border */
  padding: 10px;
  border: 5px solid black;
  /* Размер на съдържанието: 100px - 10px (padding наляво) - 10px (padding надясно) - 5px (рамка наляво) - 5px (рамка надясно) = 70px */
}

Разбирането на модела на кутията е от съществено значение за точното позициониране и оформление на елементите на страницата.