Опубликовано: 18.08.2010 Последняя правка: 08.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

margin

Свойство CSS margin используется для указания размеров внешних полей пустого пространства вокруг элемента, которые находятся за границей его рамки (border). В отличие от внутренних отступов (padding), цвет полей всегда прозрачный, поэтому сквозь них просвечивается фон окружающего контекста.

Расположение внешних полей элемента — margin

Расположение внешних полей элемента — margin

Иногда внешние поля элементов могут сливаться. В результате этого между ними образуется одно поле, а размер его будет равен значению margin элемента, у которого оно больше. Для этого элементы должны идти друг за другом в HTML-коде или быть вложенными один в другого, а их поля стоять рядом. Это значит, что между полями не может находиться непустых элементов, внутренних отступов или рамок, то есть они не должны разграничиваться.

Допустим, в следующем примере верхнее поле тега <DIV> сливается с нижним полем первого параграфа и верхним полем второго параграфа. В итоге получится одно поле с размером равным наибольшему значению margin среди данных элементов. А если, например, у <DIV> будет рамка или внутренние отступы, то верхнее поле второго параграфа уже не сможет слиться.

<p>Параграф 1</p>
<div>
 <p>Параграф 2</p>
</div>

Существуют определенные правила слияния полей:

Элемент является дочерним для другого элемента, если он находится внутри него на первом уровне вложенности.

Тип свойства

Назначение: отступы и поля.

Применяется: ко всем элементам, кроме тегов <COL>, <COLGROUP>, <THEAD>, <TFOOT>, <TBODY>, <TR>, <TD>, <TH> и элементов с display равным table-column, table-column-group, table-header-group, table-footer-group, table-row-group, table-row и table-cell.

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

Значения

Значением свойства margin является ключевое слово inherit либо указание размеров внешних полей для каждой стороны элемента.

Процентная запись: относительно ширины элемента-предка или окна браузера.

Значение по умолчанию: в спецификации указан ноль (0), но на самом деле у некоторых HTML-элементов браузеры изначально устанавливают определенный размер полей. Например, у параграфов присутствуют ненулевые поля сверху и снизу.

Свойство margin может иметь от одного до четырех (через пробел) значений, при этом будут соблюдаться данные правила:

Синтаксис

margin: [размер | проценты | auto]{1,4} | inherit

Пример CSS: использование margin

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство margin</title>
  <style type="text/css">
   div {
    width: 150px; /* ширина блоков DIV */
    height: 30px; /* высота блоков */
    background: #9f9; /* фоновый цвет */
   }
   .div1 { margin: 0 auto } /* поля блока DIV1 */
   .div2 { margin: 10px 12px 5px } /* поля блока DIV2 */
   .div3 { margin: 20px 7px 3px 12px } /* поля блока DIV3 */
  </style>
 </head>
 <body>
  <div class="div1">Блок DIV1</div>
  <div class="div2">Блок DIV2</div>
  <div class="div3">Блок DIV3</div>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS margin.

Использование свойства CSS margin

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

Вертикальные поля между блоками слились, поэтому между DIV1 и DIV2 поле равно 10px, а между DIV2 и DIV3 — 20px.

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:ДаДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ЧастичноДаДаДаДаДа

Internet Explorer 6.0 и 7.0 не понимают значение inherit и в некоторых случаях неправильно считают поля абсолютно позиционируемых элементов, когда используется значение auto.

Кроме этого IE 6.0 неправильно рассчитывает процентные значения вертикальных полей, а также всегда удваивает значение margin для всплывающего элемента, но только с той стороны, которая находится между этим элементом и родительским блоком. Данную ошибку можно исправить, применив к плавающему элементу displayinline.