box-sizing: content-box и border-box

Разбираемся, почему блок шириной 300px иногда занимает 340px, и как это починить одной строкой.

box-sizing определяет, входят ли padding и border в заданную width, или прибавляются к ней снаружи.

Проблема: куда «уехала» ширина

Вы задали блоку width: 300px и padding: 20px. Логично ожидать, что блок займёт 300px. Но по умолчанию он займёт 340px. Почему?

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
}

По умолчанию width задаёт ширину только содержимого, а padding и border прибавляются сверху. Считаем реальную ширину: 300 (content) + 20 + 20 (padding слева и справа) + 5 + 5 (border) = 350px. Это сбивает с толку и ломает сетки.

content-box — поведение по умолчанию

Режим box-sizing: content-box — стандартный. В нём width = ширина содержимого, а padding и border добавляются снаружи.

.box {
  box-sizing: content-box; /* так по умолчанию */
  width: 300px;            /* итоговая ширина: 300 + отступы + рамка */
}

Минус очевиден: трудно держать в голове реальный размер, особенно когда блоков много.

border-box — удобный режим

Режим border-box меняет правила: теперь width — это полная ширина блока, включая padding и border. Содержимое автоматически ужимается, чтобы всё уместилось.

.box {
  box-sizing: border-box;
  width: 300px;     /* блок ровно 300px, что бы вы ни добавили */
  padding: 20px;
  border: 5px solid black;
}

Теперь блок занимает ровно 300px. Padding и border «съели» часть внутреннего пространства, но внешний размер остался таким, как вы задали. Это гораздо предсказуемее.

Сравнение

Глобальный сброс — стандартная практика

Почти все проекты в самом начале CSS-файла включают border-box для всех элементов сразу. Это золотое правило современной вёрстки.

* {
  box-sizing: border-box;
}

Одна эта строка избавляет от бесконечной арифметики с отступами. Дальше вы задаёте width и не думаете, что padding всё испортит. Привыкайте писать её первой.

Итог

• По умолчанию (content-box) padding и border прибавляются к width снаружи.
• В border-box width — это полная ширина блока вместе с padding и border.
• Стандартная практика — включить * { box-sizing: border-box; } в начале файла.