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
<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 */
}
Результат
Спецификации
Specification |
---|
CSS Box Sizing Module Level 3 # box-sizing |
Начальное значение | content-box |
---|---|
Применяется к | все элементы, которые могут иметь ширину и высоту |
Наследуется | нет |
Обработка значения | как указано |
Animation type | discrete |
Совместимость с браузерами
BCD tables only load in the browser