Свойство margin CSS

Свойство CSS margin определяет внешние отступы блока, создавая пространство вокруг элемента.

Поля задаются с использованием любых единиц измерения CSS, процентов или ключевого слова auto и могут иметь отрицательные значения. Например:

.box {
  margin: 0 20px 0 30px;
}

margin – это сокращенное свойство, которое принимает до четырех значений. Порядок следования отступов в перечислении такой: верх, право, низ, лево. Легко запомнить: начинаем сверху и движемся по часовой стрелке.

Если установлено менее четырех значений, предполагается, что отсутствующие значения основаны на тех, которые определены. Например, следующие два набора правил дадут одинаковые результаты:

.box {
margin: 0 2em;
}
.box {
margin: 0 2em 0 2em;
}

Таким образом, если определено только одно значение, для всех четырех полей будет установлено одно и то же значение. Если объявлено три значения, это будет margin: [верх] [слева и справа] [низ];.

Любое из отдельных полей может быть объявлено отдельной инструкцией, и в этом случае вы определяете только одно значение для каждого свойства:

.element {
  margin-top: 10px;
  margin-right: 30px;
  margin-bottom: 20px;
  margin-left: 40px;
}

Центрирование и auto

Каждое из свойств margin также может принимать значение auto. Значение auto в основном указывает браузеру определить поле за вас. В большинстве случаев значение auto будет эквивалентно значению 0 (которое является значением по умолчанию для каждого отступа). Тем не менее auto удобен для горизонтального центрирования:

.element {
  width: 200px;
  height: 100px;
  margin: 0 auto;
}

Ниже показан пример такого центрирования.

See the Pen
margin auto by Андрей (@adlibi)
on CodePen.

В этом примере для центрирования блока по горизонтали в пределах доступного пространства выполняются две вещи:

• элементу задается ширина;
• Левое и правое поля устанавливаются в auto.

Без указанной ширины значения auto не имело бы никакого эффекта.

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

Схлопывание margin

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

Для иллюстрации возьмем следующий HTML-код:

<h2>Схлопывающиеся поля</h2>
<p>Текст для примера</p>

И следующий CSS:

h2 {
  margin: 0 0 20px 0;
}
p {
  margin: 10px 0 0 0;
}

В этом примере для элемента h2 задано нижнее поле в 20 пикселей. Элемент абзаца, который следует сразу за ним, имеет верхнее поле, равное 10 пикселям.

Казалось бы, что величина вертикального поля между h2 и абзацем будет в общей сложности 30 пикселей (20 пикселей + 10 пикселей). Но из-за коллапса полей фактически она окажется всего 20 пикселей. Это показано на примере ниже:

See the Pen
схлопывание margin by Андрей (@adlibi)
on CodePen.

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

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

Схлопывание полей также применяется к вложенным элементам. Посмотрите следующий пример:

See the Pen
схлопывание внутренних margin by Андрей (@adlibi)
on CodePen.

Здесь абзац имеет верхнее поле в 30 пикселей, который вложен в элемент div с верхним полем 40 пикселей. Кроме того, у заголовка h2 нижнее поле 20 пикселей.

Опять же, здравый смысл подсказывает, что общее пространство вертикальных полей здесь будет составлять 90 пикселей (20 + 40  + 30), но вместо этого все поля сворачиваются в одно поле в 40 пикселей (самое большое из трех). Это полезно в большинстве случаев, поскольку нет необходимости переопределять какие-либо из верхних полей, чтобы убрать лишнее вертикальное пространство.

Отрицательные отступы

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

Вот пример контейнера div, внутри которого находится заголовок h2. Для контейнера установлены внутренние отступы padding, одинаковые со всех сторон. Для h2 установлено отрицательное значение для верхнего поля margin-top: -1em;, которое нейтрализует верхний внутренний отступ padding.

See the Pen
отрицательный margin by Андрей (@adlibi)
on CodePen.