Блочная модель, и её вариации.}

Веб Браузер отображает html теги на веб-странице в виде прямоугольных областей. Такое поведение носит название Box Model (блочная модель).

Блочная модель по Консорциум (W3C.org) складывается из ширины блока (width)+левый и правый отступы (padding)+левый и правый border.

Какую блочную модель используют браузеры?

IE, начиная с версии 6, в режиме объявления Doctype использует блочную модель рекомендованную W3C. Без объявления Doctype IE использует свою собственную блочную модель.

Браузеры Firefox, Safari (Chrome) и Opera всегда используют стандартную блочную модель.

В обоих случаях ширина (width) не включает внешние отступы (margin).

Можно ли изменить режим отображения боксовой модели?

В спецификации CSS3 появится возможность смены блочной модели.

• box-sizing: border-box
• box-sizing: content-box

Используя первый вариант, блочная модель будет считаться традиционным (старым IE) способом. Второй, - по Консорциум.

Что же касается кроссбраузерности, “box-sizing” поддерживается всеми современными браузерами (используя свои спецификации) за исключением IE ранних версий. IE8 поддерживает данное свойство.

Спецификации cвойства box-sizing браузерами:

• Opera 8.5+ : ‘box-sizing‘
• Firefox 1+ : ‘-moz-box-sizing;’
• Safari 3 : ‘-webkit-box-sizing‘
• IE8 : ‘box-sizing‘