СSS Свойство box-sizing
Пример
Включить отступ и границу в общую ширину и высоту элемента:
#example1 {
box-sizing: border-box;
}
Редактор кода »
Определение и использование
Свойство box-sizing определяет, как вычисляются ширина и высота элемента: должны ли они включать отступы и границы, или нет.
| Значение по умолчанию: | content-box |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | нет Прочитайте о animatable |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.boxSizing="border-box" Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Числа, за которыми следует -webkit- или -moz- указывают первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| 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;
Значение свойств
| Значение | Описание |
|---|---|
| content-box | По умолчанию. Свойства width и height (а также свойства min/max) включают только содержимое. Отступ и граница не включены |
| border-box | Свойства ширины и высоты (а также свойства min/max) включают содержимое, отступ и границу |
| initial | Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial |
| inherit | Наследует это свойство от родительского элемента. Прочитайте о inherit |
Примеры
Пример
Указать два граничных поля рядом:
div
{
box-sizing: border-box;
width: 50%;
border: 5px solid red;
float: left;
}
Редактор кода »
Связанные страницы
CSS Учебник: CSS Бокс размер
HTML DOM Справочник: Свойство boxSizing
