Что такое CSS box model?

CSS box model — модель, по которой браузер представляет каждый элемент прямоугольником из четырёх слоёв: содержимое, внутренний отступ, рамка и внешний отступ.

Слои

margin
  border
    padding
      content

• content — область с текстом и дочерними элементами.
• padding — пространство внутри рамки, по нему растягивается фон.
• border — рамка.
• margin — отступ снаружи, отделяет элемент от соседей.

Зачем это знать

От модели зависит итоговый размер элемента. По умолчанию (box-sizing: content-box) width задаёт только содержимое, а padding и border добавляются. Отсюда частая ошибка: две колонки по 50% с padding не помещаются в строку. Исправляется через box-sizing: border-box.

Посмотреть модель конкретного элемента можно в DevTools на вкладке Computed.

Коротко для собеседования

Box model — content, padding, border, margin; итоговые размеры зависят от box-sizing.

Подробнее: MDN — Блочная модель