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

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`.