Евгений Резниченко - Спецификация CSS2

margin edge/ край поля или outer edge/ внешний край

Окружает поле бокса. Если поле имеет ширину 0, то край поля - тот же, что и край рамки .

Каждый край может быть разорван слева, справа, вверху и внизу.

Размеры области содержимого бокса- ширина содержимого и высота содержимого - зависят от нескольких факторов: имеет ли элемент, генерирующий бокс, установленные свойства 'width' или 'height', содержит ли бокс текст или другие боксы, является ли бокс таблицей и т.д. Ширина и высота бокса обсуждаются в главе некоторые детали модели визуального форматирования.

Ширина бокса выводится как сумма левого и правого поля , рамки, заполнения и ширины содержимого. Высота выводится как сумма верхнего и нижнего поля , рамки, заполнения и высоты содержимого .

Стиль фона различных областей бокса определяется так:

[x]. Область содержимого: свойство 'background' генерирующего элемента.

[x].Область заполнения : свойство 'background' генерирующего элемента.

[x]. Область рамки: свойства рамки генерирующего элемента.

[x].Область поля : поля всегда прозрачны.

Этот пример документа 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-top' и 'margin-bottom' везде, кроме контекста страницы, где процентные значения относятся к высоте бокса страницы.

auto

См. расчёт ширины и полей.

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

'margin-top' , 'margin-right' , 'margin-bottom' , 'margin-left'

Значение: | inherit

Начальное: 0

Применяется: ко всем элементам

Наследуется: нет

Процентное: относительно ширины содержащего блока

Носитель: визуальный

Это свойство устанавливает верхнее, нижнее, правое и левое поля бокса .

H1 { margin-top: 2em }

'margin'

Значение: {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-top' и 'padding-bottom' .