Свойство box-sizing CSS

Определение и использование

Атрибут box-sizing позволяет определить, как именно определенный элемент должен соответствовать определенной области.

Например, если вам нужно разместить два параллельных окна с рамкой, вы можете установить box-sizing в "border-box". Это позволяет браузеру отображать окна с указанной шириной и высотой, и вставлять рамку и внутренний отступ в окно.

См. также:

Уроки CSS3:Интерфейс пользователя CSS3

Руководство по HTML DOM:Атрибут boxSizing

Пример

Определяет два параллельных отформатированных окна с рамкой:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

Попробуйте сами

На странице снизу есть более примеров.

CSS синтаксис

box-sizing: content-box|border-box|inherit;

Значение свойства

Значение Описание
content-box

Это поведение по умолчанию для ширины и высоты, определенное CSS2.1.

Ширина и высота применяются к рамке содержимого элемента.

Отступы и рамки элемента рисуются за пределами ширины и высоты.
border-box

Ширина и высота, установленные для элемента, определяют рамку элемента.

Другими словами, любая внутренняя рамка и отступы, указанные для элемента, будут нарисованы в установленной ширине и высоте.

Ширина и высота контента определяются, вычитая от установленной ширины и высоты рамки и внутреннего отступа.
inherit Определяет, что значение атрибута box-sizing должен быть получен от родительского элемента.

Технические детали

по умолчанию: content-box
Ингерит: нет
Версия: CSS3
JavaScript синтаксис: объект.style.boxSizing="border-box"

Поддержка браузерами

Числа в таблице указывают на первую версию браузера, которая поддерживает этот атрибут.

Числа с префиксами -webkit- или -moz- указывают на первую версию, использующую префикс.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 8.0 29.0
2.0 -moz-		 5.1
3.2 -webkit-		 9.5