box-sizing

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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 = граница + внутренний отступ + высота контента.

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

box-sizing = 
content-box |
border-box

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

Пример

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

HTML

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

CSS

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 */
}

Результат

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

Specification
CSS Box Sizing Module Level 3
# box-sizing
Начальное значениеcontent-box
Применяется квсе элементы, которые могут иметь ширину и высоту
Наследуетсянет
Обработка значениякак указано
Animation typediscrete

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
box-sizing
border-box
content-box

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

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