8.3. Свойства полей: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' и 'margin'

Свойства полей определяют ширину области полей в блоке. Сокращенное свойство 'margin' устанавливает поле для всех четырех сторон, а другие свойства поля определяют только их соответствующие стороны.

Свойства, описанные в этом разделе, ссылаются к типу значения <margin-width>, который может принимать одно из следующих значений:

<length>

определяет фиксированную ширину.

<percentage>

Процент рассчитывается с учетом ширины (width) сгенерированного блока содержания. Это верно для '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 }         /* all margins set to 2em */
BODY { margin: 1em 2em }     /* top & bottom = 1em, right & left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

Последнее правило в выше указанном примере эквивалентно следующему:

BODY {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;        /* copied from opposite side (right) */
}

8.3.1. Сокращенные поля.

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

В CSS2 горизонтальные поля никогда не сокращаются.

Вертикальные поля могут сминаться между определенными блоками:

• Два или больше соседних вертикальных полей блоков формируются с сокращением нормальным образом. Результирующая ширина поля является максимальной из ширины соседних полей. В случае отрицательных полей абсолютный максимум негативных соседних полей отнимается из максимума позитивных соседних полей. Если нет позитивных полей, то абсолютный максимум негативных соседних полей вычитаются из нуля.
• Вертикальные поля между перемещающимся блоком (float box) и любым другим блоком не сминаются.
• Поля у блоков, позиционированных абсолютно или относительно, не сминаются.

Обратитесь к примерам о поле, отступе и границе для понимания сокращающихся полей.