box-sizing

Обновлено: 31.05.2022

box-sizing

Применяется для изменения алгоритма расчёта ширины и высоты элемента.

Согласно спецификации CSS ширина блока складывается из ширины содержимого (width), значений margin, padding и border. Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не содержимого, а размеры блока.

Краткая информация

Значение по умолчанию content-box
Наследуется Нет
Применяется Ко всем элементам
Анимируется Нет

Синтаксис

box-sizing: content-box | border-box

Значения

content-box Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту содержимого и не включают в себя значения margin, padding и border.
border-box Свойства width и height включают в себя значения padding и border, но не margin.

Пример

Объектная модель

Объект.style.boxSizing

Примечание

Firefox до версии 29 поддерживает свойство -moz-box-sizing.

Safari до версии 5, Chrome до версии 10, Android до версии 4 поддерживают свойство -webkit-box-sizing.

Браузеры

box-sizing

Посмотреть совместимость на Can I use?

box-sizing