CSS3 box-sizing Property

Укажите , что <div> элементы должны иметь заполнение и рамка включается в общую ширину и высоту элемента:

div {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}

Больше "Try it Yourself" примеры ниже.

Определение и использование

Свойство коробчатого проклейки используется , чтобы сообщить браузеру , что свойства проклейки (width and height) должны включать в себя.

Должны ли они включать в себя пограничный ящик? Или просто содержание ящика (который по умолчанию значение ширины и высоты свойства)?

Значение по умолчанию:	content-box
Наследование:	no
Animatable:	no. Read about animatable
Версия:	CSS3
Синтаксис JavaScript:	object .style.boxSizing="border-box" Try it

Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.

Числа следуют -webkit- или -moz- указать первую версию, которая работала с приставкой.

Имущество
box-sizing	10,0 4.0 -webkit-	8.0	29,0 2.0 -moz-	5.1 3.2 -webkit-	9.5

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

Стоимость	Описание
content-box	По умолчанию. Свойства ширины и высоты (and min/max properties) включает в себя только содержание. Пограничная, отступы, или запас не включены
border-box	Свойства ширины и высоты (and min/max properties) включает в себя содержание, отступы и границы, но не на полях
initial	Устанавливает это свойство в значение по умолчанию. Читайте о первоначальный
inherit	Наследует это свойство от своего родительского элемента. Читайте о унаследовать

Укажите два рамку, бок о бок:

div {
    box-sizing: border-box;
    width: 50%;
    float: left;
}