Что такое CSS box model

CSS box model — это концепция, описывающая структуру элементов на странице. Каждый элемент состоит из:

1. Content — содержимое (текст, изображения)
2. Padding — внутренний отступ
3. Border — граница
4. Margin — внешний отступ

Размер элемента по умолчанию рассчитывается как:
width/height + padding + border

Пример:

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

Фактическая ширина элемента: 200px (content) + 40px (padding) + 10px (border) = 250px

box-sizing: border-box изменяет расчет:

.box {
  box-sizing: border-box;
  width: 200px; /* включает padding и border */
}

Теперь ширина останется 200px, а content уменьшится до 150px (200 - 40 - 10).