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

Блочная модель (Box Model) — это концепция в CSS, описывающая структуру элемента на странице. Каждый элемент состоит из:

1. Контент (content) — внутренняя часть с текстом/изображениями
2. Отступы (padding) — прозрачное пространство вокруг контента
3. Границы (border) — рамка вокруг padding
4. Внешние отступы (margin) — прозрачное пространство за границей, отделяющее элемент от других

Пример:

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

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