margin

Поддержка браузерами


12.0+	6.0+	1.0+	1.0+	3.5+	1.0+

Описание

CSS свойство margin определяет расстояние по вертикали и/или горизонтали (его также называют "внешний отступ" или "поле") от внешнего края рамки текущего элемента до внутренней границы родительского элемента или до внешнего края элемента, который расположен рядом с текущим элементом.

описание CSS свойства margin

Свойство margin обеспечивает краткий метод установки значений сразу нескольких свойств внешнего отступа в одном объявлении. Оно может содержать от одного до четырех значений, разделяемых между собой пробелами. Если указывается более одного значения, внешний отступ устанавливается начиная с верхней позиции:

порядок значений в свойстве margin

Визуальный эффект будет зависеть от количества заданных значений:

margin:10px 5px 15px 20px;
- Верхнее поле - 10px
- Правое поле - 5px
- Нижнее поле - 15px
- Левое поле - 20px
margin:10px 5px 15px;
- Верхнее поле - 10px
- Правое и левое поле - 5px
- Нижнее поле - 15px
margin:10px 5px;
- Верхнее и нижнее поле - 10px
- Правое и левое поле - 5px
margin:10px;
- Все 4 поля по 10px

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

Объединение вертикальных полей

Поля сестринских элементов расположенных друг под другом и находящихся в потоке документа объединяются в одно общее. Высота полученного поля равняется высоте большего из двух полей, например: поле верхнего элемента (margin-bottom) составляет 10px, а нижнего элемента (margin-top) - 20px, единое поле в этом случае будет высотой 20px.
Объединение полей родительского и дочернего элемента находящихся в потоке документа происходит, если родительский элемент не имеет ничего из того, что могло бы отделять его внешний отступ от внешнего отступа дочернего элемента (рамки, внутреннего отступа или строчного содержимого). Также объединение полей не будет происходить, если родительскому элементу установить свойство overflow со значением hidden или auto. Плюс от этого способа заключается в том, что размер родительского элемента не увеличивается.

Для установки внешних отступов отдельно для каждой стороны элемента, используются следующие свойства: margin-top, margin-bottom, margin-left, margin-right.

Примечание: допускаются отрицательные значения полей.

Значение по умолчанию:	0
Применяется:	ко всем элементам, за исключением тех элементов, которые относятся к типу display: table-*, кроме table-caption, table и inline-table. Дополнительно: значения относящиеся к margin-top и margin-bottom не применяются к строчным элементам.
Анимируется:	да
Наследуется:	нет
Версия:	CSS1
Синтаксис JavaScript:	object.style.margin="10px 5px"

Синтаксис

margin: величина|auto|inherit;

Значения свойства

Значение	Описание
auto	для вертикальных отступов вычисляется как 0. При использовании для горизонтальных отступов следует учитывать следующие моменты: данное значение применяется только к блочным элементам, которые имеют фиксированную ширину при использовании значения auto, элемент сдвигается полностью влево или вправо, если значение одновременно установлено для отступа слева и справа, элемент будет центрирован по горизонтали.
величина	Указывает размер поля в единицах измерения, используемых в CSS.
%	Величина, указанная в процентах, вычисляется в зависимости от ширины области содержимого родительского элемента.
inherit	Указывает, что значение наследуется от родительского элемента.

Пример

CSS Свойство:

margin:

Результат:

myBox

CSS Код:

div#myBox {
background-color: red;
margin: auto;
}

Кликните на любое значение свойства, чтобы увидеть результат