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

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

1. Контент — внутренняя область с текстом/изображениями
2. Padding — отступ между контентом и границей
3. Border — рамка вокруг padding
4. Margin — внешний отступ, отделяющий элемент от других

Пример:

.box {
  width: 200px;         /* ширина контента */
  padding: 20px;        /* внутренний отступ */
  border: 5px solid #000; /* граница */
  margin: 10px;         /* внешний отступ */
}

Важно: по умолчанию width задаёт ширину контента, а общая ширина элемента складывается из width + padding + border + margin. Это можно изменить через box-sizing: border-box, тогда width будет включать padding и border.