CSS свойство box-sizing

Свойство box-sizing устанавливает алгоритм вычисления ширины и высоты элемента.

Спецификация CSS определяет, что общая ширина элемента вычисляется путём сложения: ширина области содержимого (width) + внутренний отступ слева и справа (padding-left и padding-right) + рамка слева и справа (border-left и border-right). Аналогичным образом вычисляется и общая высота элемента. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.

CSS синтаксис

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

Возможные значения

ЗначениеОписание
content-boxЗначение по умолчанию. Ширина (width) и высота (height) определяют только размер области содержимого. Внутренние отступы (padding) и рамка (border) элемента сюда не включаются.
border-boxШирина и высота определяется для всего элемента. Таким образом, внутренние отступы (padding) и рамка (border) элемента, но не наружние отступы (margin), находятся в пределах указанной высоты и ширины.
inheritЗначение наследуется от родительского элемента.
initialУстанавливает значение по умолчанию.

Пример использования

Устанавливаем, чтобы отступы и рамки элементов <div> включались в ширину и высоту


div {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}