Одна из ключевых особенностей cемантической валидной верстки — использование правильной блочной модели. Рассмотрим на примере, как она работает.

html:

<div id="parent">
    <div id="element">
        Lorem ipsum…
    </div>
</div>

style.css:

#parent {
    border:1px solid red;
    }
#element {
    width:200px; /* Ширина области контента */
    margin:40px; /* Поля */
    padding:20px; /* Отступы */
    border:4px solid #CCC; /* Границы */
    background:#F2F2F2;
    }

Визуальная ширина блока 248 пикселей, несмотря на то, что четко задана ширина в 200 пикселей. Дело в том, что по спецификации CSS визуальный размер блока складывается из суммы размера области контента, величины отступов и ширины границ. Заданное нами в CSS значение ширины (width) — на самом деле ширина области контента. Отсюда мы получаем визуальную ширину блока следующим образом.

Визуальный размер блока = 200 (ширина области контента) + 40 (сумма правого и левого отступов) + 8 (сумма правой и левой границ).

Для того чтобы четко задать визуальную ширину, при написании значений размеров в CSS нужно выполнить ряд нехитрых действий. Из желаемой визуальной ширины необходимо вычесть сумму обоих отступов и сумму обеих границ. Таким образом, чтобы изобразить блок шириной 200 пиксел, необходимо задать следующее значение правила width:

width = 200 (нужная визуальная ширина блока) — 40 (сумма правого и левого отступов) — 8 (сумма правой и левой границ).

Переопределим значение правила width в CSS.

style.css:

#element {
    width:152px; /* Ширина области контента */
    margin:40px; /* Поля */
    padding:20px; /* Отступы */
    border:4px solid #CCC; /* Границы */
    }

Нужный результат получен. Данные вычисления вначале могут показаться довольно сложными, но выработав привычку, вы будете выполнять их автоматически.

Неправильная блочная модель и кроссбраузерные проблемы

Даже при использовании полного правильного DOCTYPE, вы столкнетесь с ситуацией, когда блочная модель работает неправильно. Это связано с неправильной реализацией блочной модели в IE 5.x. В этом браузере визуальная ширина нашего примера вычисляется следующим образом:

Визуальная ширина блока = значению правила width.

Хотя такая модель может показаться более логичной, она не соответствует спецификации CSS.

Чтобы избежать различного отображения блоков в IE 5.x и более современных браузерах, необходимо применить хак с экранированием. Дело в том, что в CSS можно вполне законно экранировать символы (кроме A–F), и такие правила будут вполне корректно работать везде, кроме IE пятых версий. Так будет выглядеть хак, необходимый в данном примере:

ie.css:

* HTML #element {
    width:200px; /* Для пятых версий IE, некорректно обрабатывающих блочную модель */
    w\idth:152px; /* Для более старших */
    }

Для достижения такого же результата вы можете использовать и условные комментарии, подключая отдельный css-файл Internet Explorer версии 5.

Полезные ссылки

• Трюк с блочной моделью CSS
• Шпаргалка по CSS
• Modified SBMH (Simplified Box Model Hack)