box-sizing

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Описание

Свойство box-sizing используется для изменения блочной модели CSS применяемой по умолчанию, с помощью которой вычисляются ширина и высота элементов. Это свойство можно использовать для эмулирования работы браузеров, которые не корректно следуют спецификации Блочной модели CSS.

Начальное значение	`content-box`
Применяется к	все элементы, которые могут иметь ширину и высоту
Наследуется	нет
Отображение	визуальный
Обработка значения	как указано
Анимируемость	нет
Канонический порядок	уникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

/* Ключевые значения */
box-sizing: content-box;
box-sizing: border-box;

/* Глобальные значения */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

Значения

content-box: Это стандартное значение. Свойства width и height вычисляются исключительно по контенту, и не включая margin, padding и border.; Заметка: margin, padding и border будут за пределами блока.; Например: ЕСЛИ {width: 350px} И {border: 10px solid black} ТОГДА ширина блока будет равной 370px.
border-box: Свойства width и height вычисляются по контенту, padding и border, но не включая margin. Эта блоковая модель используется в Internet Explorer когда документ находится в Режиме совместимости.; Заметка: padding и border будут внутри блока.; Например: ЕСЛИ {width: 350px} И {border: 10px solid black} ТОГДА ширина блока будет, все также, равной 350px, а ширина контента будет равной 330px.

Формальный синтаксис

content-box | border-box

Примеры

/* поддерживает Firefox, WebKit, Opera и IE8+ */

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

Спецификации

Спецификация	Статус	Комментарий
CSS Basic User Interface Module Level 3 Определение 'box-sizing' в этой спецификации.	Кандидат в рекомендации

Свойство	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Базовые свойства	1.0 -webkit [1] 10.0	1.0 (1.7 или ранее)-moz[1] 29.0 (29.0)	8.0 [1]	7.0	3.0 (522)-webkit 5.1 (534.12)
`padding-box`	Нет	1.0 (1.0)	Нет	Нет	Нет

Свойство	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Базовые свойства	2.1-webkit [1] 4.0	1.0 (1.0)-moz [1] 29.0 (29.0)	Mango 7.5	(Да)	(Да)
`padding-box`	Нет	1.0 (1.0)	Нет	Нет	Нет

[1] box-sizing свойство не соблюдается когда высота вычисляется с помощью window.getComputedStyle(), для Internet Explorer, Firefox до 23, и Chrome.

Заметка: currentStyle для IE9 возвратит корректное значение высоты.

[2] Префикс -webkit был удален в 534.12.

Смотрите также

Блоковая модель CSS