box-sizing

Это свойство определяет как будет вычисляться ширина и высота элемента, включать ли внутренний отступ и рамку в подсчет.

По умолчанию — ширина и высота элемента равна ширине и высоте контента, плюс внутренние отступы padding, плюс рамка border.

Пример: вы задаете блоку width: 100px;, у блока есть рамка толщиной 3px border: 3px solid blue; и внутренний отступ 10px с каждой стороны padding: 10px;. Ширина элемента в таком случае будет 100px + 3px + 3px + 10px + 10px = 126px.

Примеры

Чаще всего на сайтах применяется border-box в таком исполнении, для всех элементов и псевдоэлементов:

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

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

Значения

Значение	Описание
content-box	По умолчанию. Ширина `width` и высота `height` включают в себя только контент.
border-box	Ширина `width` и высота `height` включают в себя контент, рамки `border` и внутренний отступ `padding`.
inherit	Наследует значение родительского блока.
initial	Устанавливает значение по умолчанию.