CSS свойство box-sizing
Поддержка браузеров
Описание
Свойство box-sizing позволяет заставить определенные элементы заполнять область определенным способом.
Для примера, вы хотели бы расположить два контейнера с границами бок о бок, этого можно достичь установкой свойства box-sizing со значением "border-box". Это заставит браузер отобразить контейнер с указанными шириной и высотой и расположить границу и отступы внутри контейнера.
Значение по умолчанию: |
content-box |
Наследуется: |
нет |
Версия: |
CSS3 |
Синтаксис JavaScript: |
object.style.boxSizing="border-box" |
Значения свойства
Значение |
Описание |
content-box |
Это поведение ширины и высоты, указанное в CSS2. Указанные ширина и высота (и свойства min/max) применяются к соответственно ширине и высоте элемента с содержимым. Отступы и граница элемента лежат вне указанных ширины и высоты. |
border-box |
Указанные ширина и высота (и свойства min/max) этого элемента определяют контейнер границы элемента. То есть, отступы и граница, указанные для элемента, лежат и отображаются внутри указанных свойств ширины и высоты. Ширина и высота содержания вычисляются путем вычитания размеров границы и отступов по соответствующим сторонам из указанных свойств "width" и "height". |
inherit |
Указывает, что значение наследуется от родительского элемента. |
div.container{
width:30em;
border:1em solid;
}
div.box{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:1em solid red;
float:left;
}
