box-sizing

CSS свойство box-sizing определяет как высчитвыается общая ширина и высота элемента.

По умолчанию в блоковой модели CSS ширина и высота, которую вы задаёте элементу применяется только для контента элемента. Если у элемента есть граница или внутренний отступ, то они добавляются к ширине и высоте, чтобы получить отображаемый на экране размер. Это значит, что когда вы выставляете ширину и высоту, вам придётся изменять значение, при добавлении границ и отступов. Например, если у вас есть четыре блока с width: 25%; , и у какого-нибудь из них есть граница или внутренний отступ слева или справа, то по умолчанию они не поместятся на одной строке.

Свойство box-sizing может изменять это поведение:

  • content-box даёт стандартное поведение свойства box-sizing. Если вы выставите элементу ширину 100 пикселей, то ширина его контента будет 100 пикселей, а ширина границ и внутренних отступов при рендере будет добавлена к финальной ширине, делая элемент шире ста пикселей.
  • border-box говорит браузеру учитывать любые границы и внутренние отступы в значениях, которые вы указываете в ширине и высоте элемента. Если вы выставите элементу ширину 100 пикселей, то эти 100 пикселей будут включать в себя границы и внутренние отступы, а контент сожмётся, чтобы выделить для них место. Обычно это упрощает работу с размерами элементов.

Примечание: Часто выставление box-sizing: border-box полезно для размещения элементов. Оно сильно упрощает работу с размерами элементов, и как правило устранаяет ряд подводных камней, на которые вы можете наткнуться, размещая контент. С другой стороны, используя position-relative или position: absolute, box-sizing: content-box позволяет позиционным значениям быть зависимыми только от контента, а не от границ и отступов, что иногда желательно.

Синтаксис

Для свойства box-sizing  устанавливается единственное ключевое слово из списка значени ниже.

Значения

content-box
Это значение по умолчанию, определенное в CSS стандарте. Свойства width и height включают исключительно контент, и не включают padding и border. Например .box {width: 350px; border: 10px solid black;}  будет иметь ширину 370 пикселей.
Размеры элемента рассчитываются следующим образом: width = ширина контента, и height = высота контента. (Границы и внутренние отступы не включаются в вычисление.)
border-box
Свойства width и height включают контент, внутренний отступ и границы, но не включают внешний отступ. Заметьте, что внутренний отступ и граница будут внутри блока. Например, .box {width: 350px; border: 10px solid black;} будет иметь общую ширину 350 пикселей, а ширина контента составит 330 пикселей. Размер контента не может быть отрицательным, минимальное значение - 0, поэтому border-box невозможно использовать для скрытия элемента.
Размеры элемента рассчитываются следующим образом: width = граница + внутренний отступ + ширина контента, и height = граница + внутренний отступ + высота контента.

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

content-box | border-box

Примечание: Значение padding-box устарело

Пример

Этот пример показывает как разные значения box-sizing изменяют видимый размер двух идентичных элементов.

HTML

<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>

CSS

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box { 
  box-sizing: content-box; 
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box { 
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

Результат

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

Спецификация Статус Комментарий
CSS Basic User Interface Module Level 3
Определение 'box-sizing' в этой спецификации.
Рекомендация
Начальное значениеcontent-box
Применяется квсе элементы, которые могут иметь ширину и высоту
Наследуетсянет
Обработка значениякак указано
Animation typediscrete

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
box-sizingChrome Полная поддержка 10
Замечания
Полная поддержка 10
Замечания
Замечания box-sizing is not respected when the height is calculated from window.getComputedStyle().
Полная поддержка 1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12
Полная поддержка 12
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Полная поддержка 29
Полная поддержка 29
Полная поддержка 1
С префиксом Замечания
С префиксом Требует вендорный префикс: -moz-
Замечания Before Firefox 23, box-sizing is not respected when the height is calculated from window.getComputedStyle().
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Полная поддержка 8
Замечания
Полная поддержка 8
Замечания
Замечания box-sizing is not respected when the height is calculated from window.getComputedStyle().
Opera Полная поддержка 7Safari Полная поддержка 5.1
Полная поддержка 5.1
Полная поддержка 3
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания box-sizing is not respected when the height is calculated from window.getComputedStyle().
Полная поддержка 2
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 18
Замечания
Полная поддержка 18
Замечания
Замечания box-sizing is not respected when the height is calculated from window.getComputedStyle().
Полная поддержка 18
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 29
Полная поддержка 29
Полная поддержка 4
С префиксом Замечания
С префиксом Требует вендорный префикс: -moz-
Замечания Before Firefox 23, box-sizing is not respected when the height is calculated from window.getComputedStyle().
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 14
Замечания
Полная поддержка 14
Замечания
Замечания box-sizing is not respected when the height is calculated from window.getComputedStyle().
Полная поддержка 14
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari iOS Полная поддержка 6
Полная поддержка 6
Полная поддержка 1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка 1.0
Замечания
Полная поддержка 1.0
Замечания
Замечания box-sizing is not respected when the height is calculated from window.getComputedStyle().
Полная поддержка 1.0
С префиксом
С префиксом Требует вендорный префикс: -webkit-
padding-box
УстаревшаяНестандартная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки 1 — 50IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки 4 — 50Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Устаревшая. Не следует использовать в новых веб-сайтах
Устаревшая. Не следует использовать в новых веб-сайтах
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

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