box-sizing
Пример
Включите отступ и рамку в общую ширину и высоту элемента:
#example1 {
box-sizing: border-box;
}
Попробуйте сами »
Определение box-sizing
CSS свойство box-sizing
определяет, как вычисляются ширина и высота элемента: должны ли они включать отступы и границы или нет.
Значение по умолчанию: | content-box |
---|---|
Унаследовано: | no |
Анимируемый: | no. Читайте о animatable |
Версия: | CSS3 |
JavaScript синтаксис: | object.style.boxSizing="border-box" Попробуй |
Поддержка box-sizing
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следуют -webkit- или -moz - указывают первую версию, которая работала с префиксом.
Свойство | |||||
---|---|---|---|---|---|
box-sizing | 10.0 4.0-webkit- |
8.0 | 29.0 2.0-moz- |
5.1 3.2-webkit- |
9.5 |
Синтаксис box-sizing
box-sizing: content-box|border-box|initial|inherit;
Значения box-sizing
Значение | Описание | Демонстрация |
---|---|---|
content-box | По умолчанию. Свойства ширины и высоты (и свойства min/max) включают только содержимое. Границы и отступы не включены | Демо ❯ |
border-box | Свойства width и height (а также свойства min/max) включают содержимое, padding и border | Демо ❯ |
initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры box-sizing
Пример
Укажите два граничащих прямоугольника рядом друг с другом:
div
{
box-sizing: border-box;
width: 50%;
border: 5px solid red;
float: left;
}
Попробуйте сами »
Страницы по теме box-sizing
CSS Учебник: CSS Размер бокса
HTML DOM справочник: boxSizing свойство