Свойство CSS box-sizing
Пример
Включите отступы и границы в общую ширину и высоту элемента:
#example1 {
box-sizing: border-box;
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство box-sizing
определяет, как рассчитываются ширина и высота элемента: должны ли они включать отступы и границы или нет.
Значение по умолчанию: | поле содержимого |
---|---|
Унаследовано: | нет |
Анимация: | нет. Читать об анимации |
Версия: | CSS3 |
Синтаксис JavaScript: | объект .style.boxSizing="граница-коробка" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следует -webkit- или -moz-, указывают первую версию, которая работала с префиксом.
Property | |||||
---|---|---|---|---|---|
box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
Синтаксис CSS
box-sizing: content-box|border-box|initial|inherit;
Значения свойств
Value | Description |
---|---|
content-box | Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included |
border-box | The width and height properties (and min/max properties) includes content, padding and border |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Дополнительные примеры
Пример
Укажите два поля с границами рядом:
div
{
box-sizing: border-box;
width: 50%;
border: 5px solid red;
float: left;
}
Пример
Установите «универсальный размер коробки»:
* {
box-sizing: border-box;
}
Связанные страницы
Учебное пособие по CSS: Размер блока CSS
Справочник по HTML DOM: свойство boxSizing