Поиск

Примеры полей, отступов и границ

Приводимый далее пример иллюстрирует сосуществование полей, отступов и границ. Следующий HTML-документ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE> Примеры полей, отступов и границ </TITLE>
<STYLE type="text/css">
UL {
background: green;
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
/* Границы не установлены */
}
LI {
color: black; /* Текст отображается черным цветом */
background: gray; /* Фон информативной области и отступов */
/* оформляется серым цветом */
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px; /* Правый сегмент отступов */
/* имеет нулевую ширину */
list-style: none /* Элементы списка не помечаются глифом */
/* Границы не установлены */
}
LI.withborder {
border-style: dashed;
border-width: medium; /* Устанавливает ширину границ со всех */
/* сторон */
border-color: black;
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI> Первый элемент списка
<LI class="withborder"> Второй элемент списка имеет большую длину,
для того чтобы проиллюстрировать процесс переноса.
</UL>
</BODY>
</HTML>

порождает дерево документа, в котором, помимо прочего, имеется элемент UL, обладающий двумя дочерними элементами LI.

На первом из следующих рисунков показан результат трансляции приведенного документа. На втором иллюстрируется взаимосвязь между полями, отступами и границами элемента UL и его дочерних элементов LI.

Обратите внимание на следующее:

  • высота каждого блока, порожденного элементом LI, определяется высотой информативной области в совокупности со значениями высоты нижних и верхних сегментов поля, границы и отступа. Заметьте, что вертикальные поля этих блоков перекрываются;
  • ширина правого сегмента отступа в блоке, порожденном элементом LI, была установлена равной нулю (свойство 'padding'). Результат виден на второй картинке;
  • поля блока, порожденного элементом LI, прозрачны по определению, поэтому зеленый цвет фона, установленный для отступов и информативной части элемента UL, виден сквозь них;
  • второй элемент LI задает границу в виде пунктирной линии (свойство 'border-style').