Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

Описание

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

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

Синтаксис

/* Ключевые значения */
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' в этой спецификации.
Рекомендация  

Совмествимость с браузерами

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Свойство 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.

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

Метки документа и участники

Внесли вклад в эту страницу: xilaraux, volodymyr.matvienko, Kapiroska, vova, Sebastianz, Sergey.Vdovareize
Обновлялась последний раз: xilaraux,