Свойство CSS box-sizing определяет, как рассчитываются размеры элемента — включая ли в ширину и высоту отступы (padding) и границы (border) или нет.

Значение content-box (по умолчанию): ширина и высота элемента задают размер только содержимого. Отступы и границы добавляются сверху к этим размерам, увеличивая итоговый размер элемента.
Значение border-box: ширина и высота включают в себя содержимое, отступы и границы. Это значит, что если задать ширину 100px, то содержимое будет уменьшено с учётом padding и border, чтобы итоговый размер оставался 100px.

Пример:

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
}

В этом случае элемент .box будет иметь общую ширину 200px, включая padding и border. Если бы было content-box, то итоговая ширина была бы 200 + 210 + 25 = 230px.

Использование border-box часто упрощает верстку, так как размеры элементов не "расползаются" из-за padding и border.

Как свойство box-sizing влияет на размер элемента?