Перерасчет ширины и высоты элемента: box-sizing

box-sizing

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 1.0 1.0 8.0 7.0 3.0
Мобильные браузеры Android Firefox Mobile IE Phone Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 2.1 1.0 9.0 12.0 3.2
Свойство
box-sizing — это свойство позволяет переопределить алгоритм расчета ширины и высоты элемента
Описание

По умолчанию (content-box) ширина и высота блочного элемента рассчитывается как: указанное значение ширины или высоты + сумма полей + сумма границ + сумма отступов, а это свойство со значением border-box позволяет принимать указанное значение за полную ширину или полную высоту блока. Например, если указано значение ширины 100px, то полная ширина блока будет равна 100 пикселей, а ширина контента в блоке будет равна: 100px — ширина отступов — ширина полей — ширина границ.

Отличие content-box от border-box на скриншотах:

content-box


border-box

Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
Ко всем элементам которые принимают ширину или высоту
Может принимать значения
content-box | border-box | inherit
Значение по умолчанию
content-box
Правила записи
свойство: значение;
Примеры

<p>

Ширина рассчитывается по алгоритму content-box

</p>

Здесь ширина контента равна 200px, а ширина блока рассчитывается следующим образом: margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 326px

<p>

Ширина рассчитывается по алгоритму border-box

</p>

Здесь ширина блока равна 200px, а ширина контента рассчитывается следующим образом: width — margin-left — border-left — padding-left — padding-right — border-right — margin-right = 74px

<p>

Это значит что свойство унаследует значение от родителя

</p>

Поделиться