Свойство 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

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

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

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

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

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