Пример
Включите отступ и рамку в общую ширину и высоту элемента:
#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 свойство