box-sizing

Пример

Оба блока шириной 200px, но второй с border-box таким и остаётся, а первый вырастает на поля и рамку:

<div class="box">content-box</div>
<div class="box box--border">border-box</div>

.box {
  width: 200px;
  margin-bottom: 0.5rem;
  padding: 20px;
  border: 5px solid;
}

.box--border {
  box-sizing: border-box;
}

Синтаксис

box-sizing: content-box | border-box;

Начальное значение

content-box

Применяется к

всем элементам, у которых действуют width и height

Наследуется

нет

Анимируется

дискретно

Вычисляемое значение

как указано

Значения

content-box

width и height задают размер только содержимого. Поля и рамка добавляются сверху. Значение по умолчанию.

border-box

width и height задают размер вместе с полями и рамкой. Содержимое сжимается, чтобы всё поместилось.

Как понять

С content-box итоговая ширина считается так: width + padding слева и справа + border слева и справа. Для блока из примера: 200 + 40 + 10 = 250 пикселей.

С border-box итоговая ширина равна width, а место под содержимое — то, что осталось: 200 − 40 − 10 = 150 пикселей. Так проще думать о раскладке: если колонка занимает 50%, она занимает ровно 50%, какие бы поля у неё ни были.

Примеры

Для всех элементов

Самое частое использование — одно правило в начале стилей:

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

Две колонки по 50%

С border-box две колонки по 50% с полями помещаются в строку. С content-box вторая уехала бы вниз:

<div class="row">
  <div class="col">Левая</div>
  <div class="col">Правая</div>
</div>

.col {
  box-sizing: border-box;
  display: inline-block;
  width: 50%;
  padding: 1rem;
  border: 2px solid;
}

.row {
  font-size: 0; /* убрать пробел между inline-block */
}

.col {
  font-size: 1rem;
}

Подсказки

• box-sizing не наследуется. Правило * { box-sizing: border-box; } не затрагивает псевдоэлементы — поэтому в него добавляют ::before и ::after.
• margin в размер не входит ни при каком значении.
• Некоторые элементы форм (input, select, button) в разных браузерах по умолчанию используют разные модели — общее правило border-box их выравнивает.