Закрыть   X

  •    
  •    
Печать

box-sizing

Автор: Алексей Елизаров.

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;
}


 


© 2018 cssprofi.ru.Алексей Елизаров. Все права защищены
cssprofi.ru - запрещено использование материалов сайта без согласия его автора и обратной ссылки