Что такое блочная модель в CSS?

Блочная модель в CSS описывает, как рассчитывается пространство, занимаемое элементом на веб-странице. Она включает в себя:

• Content (содержимое): Область для фактического содержимого элемента (текст, изображения).
• Padding (внутренние отступы): Пространство между содержимым и границей элемента.
• Border (граница): Граница, окаймляющая padding и content.
• Margin (внешние отступы): Пространство вокруг границы элемента, отделяющее его от других элементов.

Размер элемента по умолчанию (в стандартной модели box-sizing: content-box) определяется суммой размеров content, padding и border. Margin добавляется к общему занимаемому пространству, но не влияет на размер самого элемента.

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

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

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

Понимание блочной модели критически важно для точного позиционирования и компоновки элементов на странице.