4 Модель форматирования

CSS1 предполагает простой ортогональный способ форматирования, когда каждый элемент образуется одним или несколькими прямоугольными полями. (Элементы, имеющие параметр 'display' со значением 'none', не форматируются и поэтому не влияют на поле. Все поля имеют внутреннюю содержательную область с устанавливаемыми смежными областями отступа, рамки и границы.

_______________________________________

| |

| граница (прозрачная) |

| _________________________________ |

| | | |

| | рамка | |

| | ___________________________ | |

| | | | | |

| | | отступ | | |

| | | _____________________ | | |

| | | | | | | |

| | | | содержание | | | |

| | | |_____________________| | | |

| | |___________________________| | |

| |_________________________________| |

|_______________________________________|

| ширина элемента |

| ширина поля |

Размеры границы, рамки и отступа устанавливаются соответственно описаниям следующих разделов настоящего документа: (5.5.1-5.5.5) для границы; (5.5.6-5.5.10) для отступа; (5.5.11-5.5.22) для рамки.

Отступ использует тот же самый фон, что и сам элемент (установка свойств фона см. 5.3.2-5.3.7). Цвет и стиль рамки устанавливаются в свойствах рамки. Границы всегда прозрачны, поэтому через них будет просвечивать родительский элемент.

Размеры поля есть сумма размеров элемента (форматированного текста или изображения) и размеров областей отступа, рамки и границы.

С точки зрения форматирования элементы подразделяются на два основных типа: блочные и строчные.

4.1 Блочные элементы

Элементы с параметром 'display', имеющим значение 'block' или 'list-item' относятся к блочным элементам. Плавающие (floating) элементы (т.е. со значением параметра 'float' иным, чем 'none') также считаются блочными.

Следующий пример показывает, как границы и отступы форматируют элемент 'UL' с двумя дочерними. Для упрощения границы на диаграмме не показаны. Учтите, что односимвольные "константы" в данном примере - это не синтаксис CSS1, это просто удобный способ связать значения таблицы стилей с рисунком.

<STYLE TYPE="text/css">

UL {

background: red;

margin: A B C D;

padding: E F G H;

}

LI {

color: white;

background: blue;

margin: a b c d;

padding: e f g h;

}

</STYLE>

..

<UL>

<LI>1й элемент списка

<LI>2й элемент списка

</UL>

________________________________________________________

| |

| A UL граница прозрачная |

| _______________________________________________ |

| D | | B |

| | E UL отступ красный | |

| | _______________________________________ | |

| | H | | F | |

| | | a LI граница прозрачная | | |

| | | красный цвет просвечивает | | |

| | | _______________________________ | | |

| | | d | | b | | |

| | | | e LI отступ синий (blue) | | | |

| | | | | | | |

| | | | h 1й элемент списка f | | | |

| | | | | | | |

| | | | g | | | |

| | | |_______________________________| | | |

| | | | | |

| | | max(a, c) | | | <- См. max

| | | _______________________________ | | |

| | | | | | | |

| | | d | e LI отступ синий (blue) | | | |

| | | | | | | |

| | | | h 2й элемент списка f | | | |

| | | | | | | |

| | | | g | | | |

| | | |_______________________________| | | |

| | | | | |

| | | c LI отступ прозрачный, | | |

| | | красный цвет просвечивает | | |

| | |_______________________________________| | |

| | | |

| | G | |

| |_______________________________________________| |

| |

| C |

|_______________________________________________________|

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

Если бы в вышеназванном примере указывались рамки, они бы располагались между отступами и границами.

Некоторые из используемых терминов иллюстрирует следующая диаграмма:

--------------- <-- верх

верхняя граница

---------------

верхняя рамка

---------------

верхний отступ

+-------------+ <-- потолок

| | | | | | | |

| левая | левая | левый | | правый | правая | правая |

|-граница|-рамка--|-отступ-|-содержание--|-отступ--|--рамка--|-граница-|

| | | | | | | |

+-------------+ <-- подвал

^ ^ ^ ^

левый внеш.край | левый внутр.край | правый внутр.край | правый внеш.край

нижний отступ

---------------

нижняя рамка

---------------

нижняя граница

--------------- <-- низ

Левый внешний край - это край всего элемента, с учетом отступа, рамки и границы. Левый внутренний край - это край содержания внутри отступа, рамки и границы. Справа - аналогично. Верх - это верх самого объекта с учетом отступа, рамки и границы; он определяется для строковых и плавающих элементов, но не для фиксированных блочных элементов. Потолок - это верх содержания внутри отступа, рамки и границы. Низ - это низ самого элемента, ниже отступа, рамки и границы; он определяется для строковых и плавающих элементов, но не для фиксированных блочных элементов. Подвал - это низ элемента внутри отступа, рамки и границы (низ содержания).

Ширина элемента - это ширина содержания, т.е. расстояние между левым и правым внутренними краями. Высота - это высота содержания, т. е. расстояние от подвала до потолка.