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

Значение по умолчанию: content-box
Применяется к: Все элементы, которые имеют ширину или высоту
Наследование: Нет
Анимирование: Нет. Анимируемые свойства
Версия: Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

box-sizing: content-box | padding-box | border-box | initial | inherit

Примеры написания кода свойства box-sizing:

.box {
    width: 50%;
    padding: 15px;
    float: left;
    border: 5px solid #000;
    box-sizing: border-box;
}

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

В следующей таблице описаны значения этого свойства.

Значение Описание
content-box Заданные свойства width и height включают только содержимое элемента. Они не включают отступы (padding), границы (border) или поля (margin).
padding-box Заданные свойства width и height включают размер отступов (padding), и не включают границы (border) или поля (margin).
border-box Заданные свойства width и height включают отступы (padding) и границы (border), но не включают поля (margin).
initial Устанавливает это свойство в значение по умолчанию.
inherit Если указан, связанный элемент принимает вычисленное значение своего родительского элемента box-sizing.

Поддержка браузеров

Свойство box-sizing поддерживается во всех основных браузерах.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.