Поиск

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

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

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

<длина>

Указывает фиксированную ширину.

<проценты>

Процентное соотношение, вычисляемое относительно ширины контейнера сгенерированного блока. Это правило применимо к свойствам 'margin-top' и 'margin-bottom', за исключением их использования в контексте страницы, для которой процентное соотношение вычисляется относительно высоты страничного блока.

auto

Подробную информацию можно найти в разделе об определении поперечных размеров и полей.

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

'margin-top', 'margin-right', 'margin-bottom', 'margin-left' Значение: <margin-width> | наследуемое

Начальное значение: 0
Область применения: все элементы
Наследование: нет
Процентное представление: относительно ширины контейнера
Применяется к: устройствам визуального форматирования

Эти свойства устанавливают значения ширины верхнего, нижнего, правого и левого полей блока.

H1 { margin-top: 2em }

'margin' Значение: <margin-width>{1,4} | наследуемое
Начальное значение: для свойства стенографического типа не определено
Область применения: все элементы
Наследование: нет
Процентное задание: относительно ширины контейнера
Применяется к: устройствам визуального форматирования

Свойство '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 горизонтальные поля никогда не перекрываются.

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

  • В нормальном потоке вертикальные поля двух или более соседних структурных блоков перекрываются. Ширина получившегося в результате этого поля равна максимальной ширине перекрывающихся полей. При отрицательных значениях ширины полей происходит сравнение их абсолютных значений, из которых затем выбирается максимальное, исходя из максимального положительного значения ширины. Если положительных значений ширины вовсе нет, то выбор максимума из абсолютных значений ширины полей осуществляется, исходя из предположения, что максимальная ширина равна нулю.
  • Вертикальные поля перемещаемого и любого другого блока никогда не перекрываются.
  • Поля абсолютно и относительно позиционируемых блоков никогда не перекрываются.

Более подробную информацию о перекрывающихся полях можно найти в примерах полей, отступов и границ.