Это свойство определяет как будет вычисляться ширина и высота элемента, включать ли внутренний отступ и рамку в подсчет.
По умолчанию — ширина и высота элемента равна ширине и высоте контента, плюс внутренние отступы padding
, плюс рамка border
.
Пример: вы задаете блоку width: 100px;
, у блока есть рамка толщиной 3px border: 3px solid blue;
и внутренний отступ 10px с каждой стороны padding: 10px;
. Ширина элемента в таком случае будет 100px + 3px + 3px + 10px + 10px = 126px.
Примеры
Чаще всего на сайтах применяется border-box
в таком исполнении, для всех элементов и псевдоэлементов:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Значения
Значение | Описание |
---|---|
content-box | По умолчанию. Ширина width и высота height включают в себя только контент. |
border-box | Ширина width и высота height включают в себя контент, рамки border и внутренний отступ padding . |
inherit | Наследует значение родительского блока. |
initial | Устанавливает значение по умолчанию. |
Поддержка браузерами
НастольныеМобильные
box-sizing
10
1 -webkit-
12
12 -webkit-
29
1 -moz-
49 -webkit-
44 -webkit-
8
7
5.1
3 -webkit-
18
18 -webkit-
29
4 -moz-
49 -webkit-
44 -webkit-
14
14 -webkit-
6
1 -webkit-
1.0
1.0 -webkit-
4
2 -webkit-
padding-box
⚠️ устарело
⚠️ нестандартное
нет
нет
1-50
нет
нет
нет
нет
4-50
нет
нет
нет
нет
Поддерживается: Да Нет Пользователь должен включить