Каждый элемент документа может быть помещен в прямоугольный контейнер. Авторы CSS2 называют этот контейнер «ядром» (core content area) и помещают его в еще три контейнера: подложку, рамку и поля. Рисунок показывает эти контейнеры и определяет некоторые полезные понятия.
Верхний (top), нижний (bottom), левый внешний (left outer edge) и правый внешний (right outer edge) края ограничивают ядро элемента и связанные с ним области подложки (padding), рамки (border) и полей (margin space). Внутренний верхний (inner top), внутренний нижний (inner bottom), левый внутренний (left inner edge) и правый внутрен
ний (right inner edge) края определяют границы ядра. Дополнительное пространство вокруг элемента – это область между внутренними и внешними краями, включающая подложку, рамку и поля. Броузер может опускать любое из этих дополнительных пространств, и для многих элементов внешние и внутренние края совпадают.
Когда элементы являются смежными по вертикали, нижнее поле верхнего элемента и верхнее поле нижнего элемента перекрываются так, что полное расстояние между смежными элементами будет равно величине большего из полей. К примеру, пусть у одного абзаца нижнее поле равно одному дюйму, а верхнее поле следующего абзаца равно половине дюйма, тогда между абзацами будет расстояние, равное ширине большего (однодюймового) поля. Этот метод известен как схлопывание полей и обычно ведет улучшению внешнего вида документов.
Поля смежных по горизонтали элементов не перекрываются. Вместо этого CSS2 модель складывает смежные горизонтальные поля. К примеру, если у абзаца левое поле один дюйм и он соседствует с изображением, правое поле которого 0,5 дюйма, тогда полное расстояние между ними будет равно полутора дюймам. Это правило относится и к вло
женным элементам, так что абзац, содержащийся в разделе, будет иметь левое поле, равное сумме левых полей раздела и абзаца.
Как видно из рисунка, полная ширина элемента равна сумме семи величин: левого и правого полей, левой и правой рамки, левой и правой подложки и ядра элемента. Сумма этих семи величин должна равняться полной ширине элемента. Из этих семи величин только трем может быть присвоено значение auto: ширине элемента и его левому и правому полю. Это означает, что броузер может вычислять значение для этих свойств. При необходимости броузер следует перечисленным ниже правилам:
• Если ни для одного из этих свойств не установлено значение auto и полная ширина оказывается меньше ширины родительского элемента, свойству margin-right назначается auto и правое поле увеличивается, чтобы сделать полную ширину элемента равной ширине родительского.
• Если auto назначено ровно одному свойству, именно оно будет сделано достаточно большим, чтобы полная ширина стала равной ширине родительского элемента.
• Если width, margin left и margin right установлены в auto, поддерживающий стандарт CSS2 броузер определит левое и правое поля равными нулю и назначит width достаточно большим, чтобы сделать полную ширину равной ширине родительского элемента.
• Если левое и правое поля установлены в auto, они всегда будут равными, чтобы центрировать элемент относительно родительского.
Существуют специальные правила для плавающих элементов. Поля плавающего элемента (такого как изображение с выравниванием align=left), если только они не отрицательные, не схлопываются с полями охватывающего или предыдущего элемента.
<body>
<p>
<img align=left src=»pics/img.gif»>
Some sample text…
</body>
Броузер двигает изображение вместе с его полями влево и вверх, насколько это возможно без перекрытия левого и верхнего полей абзаца или тела документа. Левые поля абзаца и содержащего его тела документа складываются, тогда как верхние схлопываются.