Каскадные таблицы стилей, уровень 1.Спецификация CSS1


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


Элементы с параметром '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 | |_______________________________________________________|

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

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

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




- Начало -  - Назад -  - Вперед -