box-sizing свойство CSS: border-box, content-box

Свойство box-sizing в CSS управляет включением или не включением размеров границ и полей в общий размер элемента.

Обычная установка значений для height и width, которые задают размеры по вертикали и горизонтали, распространяется лишь на содержимое блока. Поэтому при определении ненулевых отступов и границ, как внутренних, так и внешних, площадь, занимаемая блоком, будет больше, чем та, что вы задали для блока. И это часто бывает неудобно и не соответствуют ожиданиям. Например, если для элемента определить следующие свойства:

div {
  padding: 20px 30px;
  width: 200px;
}

Мы могли бы ожидать, что увидим прямоугольник шириной 200px, но на самом деле его ширина будет 240px и сложится из его ширины 200 и отступов по бокам 2х20.

На примере ниже это первый прямоугольник “по умолчанию”.

Ко второму блоку применим свойство box-sizing: border-box, которое предписывает учитывать в общем размере внутренние отступы и границы. И в этом случае результат будет соответствовать ожидаемому – ширина блока = 200px.

See the Pen
padding box by Андрей (@adlibi)
on CodePen.

В связи с этим будет практично применить свойство в качестве значения по умолчанию ко всем элементам на странице, включая псевдоэлементы:

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

Значения

Свойству можно присвоить любое из четырех стандартных значений:

content-box: значение используется по умолчанию. Как и следует из названия, значение распространяет установленные размеры только на содержимое блока, например, текст. Все остальные свойства – граница и поля – занимают пространство вне заданных габаритов.
padding-box: при установке значения padding-box высота (width) и ширина (height), кроме содержимого, включают в себя поля (padding).
border-box: в случае присвоения этого значения свойства width и height, кроме контента, учитывают поля внутренних отступов и границы. Таким образом, последние могут расти лишь внутрь элемента – за счет пространства, занимаемого его содержимым. Неконтролируемыми остаются только внешние отступы – margin.
inherit: влечет наследование признаков блока-родителя, как и у многих других свойств CSS.

На изображении ниже сравнивается значение content-box – по умолчанию (вверху) с border-box (внизу):

Красная линия между изображениями представляет заданную ширину элементов. Обратите внимание, что элемент с размером по умолчанию: box-sizing: content-box превышает заявленную ширину, когда отступы и границы добавляются к содержимому, в то время как элемент со значением box-sizing: border-box полностью укладывается в заявленную ширину.

Работа в браузерах

Mozilla Firefox требует добавления к названию свойства приставки -moz: -moz-box-sizing.

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

{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

Также следует иметь в виду, что padding-box не работает в таких браузерах, как Google Chrome, Safari, Internet Explorer, Opera.