CSS · размеры

Свойство box-sizing

box-sizing определяет, что входит в указанную ширину и высоту элемента. Правильное значение избавляет от неожиданного переполнения карточек и колонок.

Почему ширина растёт

При стандартном content-box значение width относится только к содержимому. Padding и border добавляются сверху, поэтому блок шириной 300 пикселей фактически становится шире.

.card {
  width: 300px;
  padding: 24px;
  border: 2px solid; /* итог: 352px */
}

Режим border-box

При border-box отступы и границы входят в заданную ширину. Само содержимое ужимается, а внешний размер остаётся равным 300 пикселям.

.card {
  box-sizing: border-box;
  width: 300px;
  padding: 24px;
  border: 2px solid;
}

Глобальная настройка

Обычно border-box применяют ко всем элементам и псевдоэлементам. Наследование помогает компонентам не возвращаться случайно к content-box.

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

Частые ошибки

• Складывать width и padding вручную.
• Забывать псевдоэлементы.
• Ожидать, что border-box ограничит длинное содержимое.
• Путать box-sizing с display.

Связанные темы

width · padding · Блочная модель