Справочник по CSS (ЦСС) и ШТМЛ

Почему различается явно заданная ширина слоя в разных браузерах?

По спецификации CSS (ЦСС) общая ширина слоя складывается из следующих значений: ширина контента (параметр width), толщина границ слева и справа (border), поля (padding) и отступы (margin). Для наглядности просмотрим следующий код (пример 1).

Пример 1. Слой с заданной шириной

<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01//EN" "http://www.w3.org/TR/ШТМЛ4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ширина слоя</title>
<style type="text/CSS (ЦСС)">
#layer {
width: 400px; /* Ширина слоя в пикселах */
background: #fc0; /* Цвет фона */
margin: 20px; /* Отступы вокруг слоя */
padding: 10px; /* Значения полей */
border: 2px solid #333; /* Параметры рамки */
}
</style>
</head>
<body>
<div id="layer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
</body>
</html>

В данном случае суммарная ширина слоя в пикселах равна

400 + 20 + 20 + 10 + 10 + 2 + 2 = 464

Удвоенные числа получились из-за того, что параметры margin, padding и border действуют для всех сторон элемента одновременно. Поэтому по горизонтали отступы, поля и границы добавляются сразу слева и справа.

Однако в некоторых браузерах, в частности, Internet Эксплорер и Опера, за общую ширину слоя берется значение параметра width. Различие подходов приводит к неодинаковому отображению одного и того же объекта в разных браузерах. Впрочем, подобное различие проявляется только в том случае, если не указан <!DOCTYPE>. Так что код, приведенный в примере 1, работает корректно во всех браузерах.

Вывод следующий ? всегда задавайте полный <!DOCTYPE> и учитывайте, что ширина слоя это не просто параметр width, а сумма значений ширины контента, отступов, полей и границ.