CSS3 и блочная модель

Блочная модель (box model)
Все, кто начинал верстать, столкнулись с тем, что модель вычисления ширины блока вместе со всякими padding и border не очень логична.



Разные блочные (боксовые, коробочные) модели (w3c & microsoft box models)

Для каждого из блоков задана ширина в 200px, padding:20px и border:20px.

w3c box model

IE5 box model

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

Синтаксис

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

Значения

content-box

Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.

border-box

Свойства width и height включают в себя значения полей и границ, но не отступов (margin). Эта модель используется браузером Internet Exporer в режиме несовместимости.

inherit

Наследует значение родителя.

Мечта! Блок шириной 100% c padding!

width:100%;
border:20px solid green;
padding:20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box; /*эта строка уже не нужна, начиная с Beta2 IE8 поддерживает box-sizing*/
box-sizing: border-box;