box-sizing¶
Свойство box-sizing
применяется для изменения алгоритма расчёта ширины и высоты элемента.
Согласно спецификации CSS ширина блока складывается из ширины контента (width
), значений отступов (margin
), полей (padding
) и границ (border
). Аналогично обстоит и с высотой блока. Свойство box-sizing
позволяет изменить этот алгоритм, чтобы свойства width
и height
задавали размеры не контента, а размеры блока.
Интерфейс
Синтаксис¶
/* Keyword values */
box-sizing: content-box;
box-sizing: border-box;
/* Global values */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;
Значения¶
content-box
- Основывается на стандартах CSS, при этом свойства
width
иheight
задают ширину и высоту контента и не включают в себя значения отступов, полей и границ. border-box
- Свойства
width
иheight
включают в себя значения полей (padding
) и границ (border
), но не отступов (margin
).
Примечания¶
Firefox до версии 29 поддерживает свойство -moz-box-sizing
.
Safari до версии 5.0, Chrome до версии 10.0, Android до версии 4.0 поддерживают свойство -webkit-box-sizing
.
Значение по-умолчанию:
box-sizing: content-box;
Применяется ко всем элементам
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>box-sizing</title>
<style>
.box1 {
background: #f0f0f0; /* Цвет фона */
width: 300px; /* Ширина блока */
padding: 10px; /* Поля */
border: 2px solid #000; /* Параметры рамки */
}
.box2 {
background: #fc0; /* Цвет фона */
width: 300px; /* Ширина блока */
padding: 10px; /* Поля */
margin-top: 10px; /* Отступ сверху */
border: 2px solid #000; /* Параметры рамки */
box-sizing: border-box; /* Ширина блока с полями */
}
</style>
</head>
<body>
<div class="box1">
Ширина с учетом значения свойства width, полей и
границ.
</div>
<div class="box2">
Ширина равна значению свойства width.
</div>
</body>
</html>