Что такое box-sizing

box-sizing отвечает за то, как браузер связывает CSS-свойства width и height с реальным размером коробки элемента.

В стандартной модели content-box ширина и высота относятся только к контенту. Если добавить padding или border, элемент займет больше места.

В модели border-box заданные width и height уже включают контент, внутренние отступы и рамку. Внешняя коробка остается в заданном размере, а место для контента уменьшается.

Допустим, у блока есть такие стили:

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid #999;
}

При content-box итоговая ширина без margin будет 300 + 20 + 20 + 2 + 2 = 344px. Это часто ломает сетку, если вы рассчитывали, что карточка займет ровно 300px.

При border-box итоговая ширина останется 300px. Внутри этой ширины уже лежат padding и border, поэтому контентная область будет меньше: 300 - 40 - 4 = 256px.

В интерфейсной верстке вам обычно удобно мыслить внешними размерами: колонка 50%, карточка 320px, input 100% ширины родителя. Если padding добавляется поверх этих размеров, легко получить горизонтальный скролл или перенос элемента на новую строку.

Поэтому в проектах часто используют reset:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Иногда выбирают inherit-подход:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

Важно добавить псевдоэлементы. Если декоративный ::before или ::after считается иначе, он может вылезти за блок или сдвинуть визуальный слой.

В ответе связывайте свойство не только с формулой, но и с реальными задачами. Например, при верстке формы input с width: 100% и padding при content-box может стать шире контейнера. На мобильном экране это дает горизонтальный скролл, обрезанную рамку поля или неаккуратное выравнивание с label. Безопаснее задать общий border-box или локально применить его к контролу, а затем отдельно проверить margin и длинный текст.

Хорошая короткая формулировка:

box-sizing задает, входят ли padding и border в width и height. По умолчанию content-box считает только контент, а border-box включает padding и border в заданный размер. Поэтому border-box часто используют в reset, чтобы интерфейсные блоки с padding не ломали сетку.