Блочные элементы
Элементы с параметром '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 | |_______________________________________________________|
В техническом плане, свойства заполнения и границы не наследуются. Но, как видно из примера, элемент позиционируется относительно родительских и "братских", поэтому свойства границы и заполнения последних отражаются на дочерних элементах.
Если бы в вышеназванном примере указывались рамки, они бы располагались между отступами и границами.
Некоторые из используемых терминов иллюстрирует следующая диаграмма:
--------------- <-- верх верхняя граница --------------- верхняя рамка --------------- верхний отступ +-------------+ <-- потолок | | | | | | | | | левая | левая | левый | | правый | правая | правая | |-граница|-рамка--|-отступ-|-содержание--|-отступ--|--рамка--|-граница-| | | | | | | | | +-------------+ <-- подвал ^ ^ ^ ^ левый внешний край | левый внутр. край | правый внутр. край | правый внешний край нижний отступ --------------- нижняя рамка --------------- нижняя граница --------------- <-- низ
Левый внешний край - это край всего элемента, с учетом отступа, рамки и границы. Левый внутренний край - это край содержания внутри отступа, рамки и границы. Справа - аналогично. Верх - это верх самого объекта с учетом отступа, рамки и границы; он определяется для строковых и плавающих элементов, но не для фиксированных блочных элементов. Потолок - это верх содержания внутри отступа, рамки и границы. Низ - это низ самого элемента, ниже отступа, рамки и границы; он определяется для строковых и плавающих элементов, но не для фиксированных блочных элементов. Подвал - это низ элемента внутри отступа, рамки и границы (низ содержания).
Ширина элемента - это ширина содержания, т.е. расстояние между левым и правым внутренними краями. Высота - это высота содержания, т. е. расстояние от подвала до потолка.
