Евгений Резниченко - Спецификация CSS2
border edge/край рамки
Окружает рамку бокса . Если рамка имеет ширину 0, то край рамки - это то же, что и край заполнения.
margin edge/край поля или outer edge/внешний край
Окружает поле бокса. Если поле имеет ширину 0, то край поля - тот же, что и край рамки.
Каждый край может быть разорван слева, справа, вверху и внизу.
Размеры области содержимого бокса - ширина содержимого и высота содержимого - зависят от нескольких факторов: имеет ли элемент, генерирующий бокс, установленные свойства 'width' или 'height', содержит ли бокс текст или другие боксы, является ли бокс таблицей и т.д. Ширина и высота бокса обсуждаются в главе некоторые детали модели визуального форматирования.
Ширина бокса выводится как сумма левого и правого поля, рамки, заполнения и ширины содержимого. Высота выводится как сумма верхнего и нижнего поля, рамки, заполнения и высоты содержимого.
Стиль фона различных областей бокса определяется так:
[x]. Область содержимого: свойство 'background' генерирующего элемента.
[x]. Область заполнения: свойство 'background' генерирующего элемента.
[x]. Область рамки: свойства рамки генерирующего элемента.
[x]. Область поля: поля всегда прозрачны.
Этот пример документа 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; /* Заметьте, что заполнение справа 0px */ 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.
[D]
Обратите внимание, что:
[x]. Ширина содержимого каждого бокса LI вычисляется сверху вниз; содержащий блок для каждого бокса LI устанавливается элементом UL.
[x]. Высота каждого бокса LI задаётся высотой содержимого плюс верхнее и нижнее заполнение, рамки и поля. Обратите внимание, что горизонтальные поля между боксами LI сжаты.
[x]. Правое заполнение боксов LI было установлено шириной 0 (свойство 'padding'). Результат виден на второй иллюстрации.
[x]. Поля боксов LI прозрачны - поля всегда прозрачны - так что цвет фона (зелёный) заполнения и области содержимого UL просвечивает сквозь него.
[x]. Второй элемент LI специфицирует пунктирную рамку (свойство 'border-style').
Свойства поля специфицируют область полей бокса. Сокращённое свойство 'margin' устанавливает поле для всех четырёх сторон, в то время как другие свойства устанавливают только соответствующие стороны.
Свойства, определённые в этом разделе, относятся к типу значений <margin-width>, который может устанавливаться в:
<length>
Специфицирует фиксированную ширину.
<percentage>
Процентное значение высчитывается относительно ширины содержащего блока сгенерированного бокса. Это верно для 'margin-top' и 'margin-bottom' везде, кроме контекста страницы, где процентные значения относятся к высоте бокса страницы.
auto
См. расчёт ширины и полей.
Негативные значения свойств полей допускаются, но могут существовать ограничения, специфичные для конкретных реализаций.
'margin-top', 'margin-right', 'margin-bottom', 'margin-left'
Значение: <margin-width> | inherit
Начальное: 0
Применяется: ко всем элементам
Наследуется: нет
Процентное: относительно ширины содержащего блока
Носитель: визуальный
Это свойство устанавливает верхнее, нижнее, правое и левое поля бокса.
H1 { margin-top: 2em }
'margin'
Значение: <margin-width>{1,4} | inherit
Начальное: не определено для сокращённого свойства
Применяется: ко всем элементам
Наследуется: нет
Процентное: относительно ширины содержащего блока
Носитель: визуальный
'margin' - это сокращённое свойство для установки значений 'margin-top', 'margin-right', 'margin-bottom' и 'margin-left' в одном месте в таблице стилей.
Если имеется одно значение, то оно применяется ко всем сторонам. Если дано два значения, верхнее и нижнее поля устанавливаются в первое, а правое и левое поля - во второе значение. Если дано три значения, верхнее поле устанавливается в первое, левое и правое - во второе, а нижнее поле - в третье значение. Если задано четыре значения, они применяются к верхнему, правому, нижнему и левому полям соответственно.
BODY { margin: 2em } /* все поля установлены в 2em */ BODY { margin: 1em 2em } /* верхнее и нижнее = 1em, правое и левое = 2em */ BODY { margin: 1em 2em 3em } /* верхнее=1em, правое=2em, нижнее=3em, левое=2em */
Последнее правило эквивалентно следующему:
BODY { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; /* копируется из противоположной стороны (из правой) */
В этой спецификации выражение сжатие полей означает, что смежные поля (не разделённые заполнением и рамками) двух или более боксов (которые могут быть последовательными или вложенными) образуют единое поле.
В CSS2 вертикальные поля никогда не сжимаются.
Горизонтальные поля могут сжиматься между определёнными боксами:
[x]. Два или более смежных горизонтальных поля боксов блока при нормальном расположении сжимаются. Результирующая ширина поля - это максимальная ширина из смежных полей. В случае негативных значений полей, абсолютный максимум негативных смежных полей отсчитывается от максимума позитивных смежных полей. Если нет позитивных полей, абсолютный максимум негативных смежных полей отсчитывается от нуля.
[x]. Вертикальные поля между обтекаемым боксом и любым другим боксом не сжимаются.
[x]. Поля абсолютно и относительно позиционированных боксов не сжимаются.
См. иллюстрацию сжимаемых полей в примере полей, заполнения и рамок.
Свойства обтекания специфицируют ширину области заполнения бокса. Сокращённое свойство 'padding' устанавливает заполнение для всех четырёх сторон, а другие свойства заполнения устанавливают соответствующие стороны.
Свойства, определённые в этом разделе, относятся к типу значений <padding-width>, который может устанавливаться в:
<length>
Специфицирует фиксированную ширину.
<percentage>
Процентное, высчитывается относительно ширины содержащего блока, генерирующего бокс, в том числе и для 'padding-top' и 'padding-bottom'.
В отличие от свойств полей, значения заполнения не могут быть негативными. Как и в свойствах полей, процентные значения свойств заполнения относятся к ширине бокса, сгенерированного содержащим блоком.
'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
Значение: <padding-width> | inherit
Начальное: 0
Применяется: ко всем элементам
Наследуется: нет
Процентное: относительно ширины содержащего блока
Носитель: визуальный
Эти свойства устанавливают верхнее, правое, нижнее и левое заполнение для бокса.
BLOCKQUOTE { padding-top: 0.3em }
'padding'
Значение: <padding-width>{1,4} | inherit
Начальное: не определено для сокращённого свойства
Применяется: ко всем элементам
