CSS-свойство margin

Сокращённое свойство margin CSS задаёт область внешнего отступа со всех четырёх сторон элемента.

Попробуйте

margin: 1em;

margin: 5% 0;

margin: 10px 50px 20px;

margin: 10px 50px 20px 0;

margin: 0;

<section id="default-example">
  <div id="container">
    <div class="row"></div>
    <div class="row transition-all" id="example-element"></div>
    <div class="row"></div>
  </div>
</section>

#container {
  width: 300px;
  height: 200px;
  display: flex;
  align-content: flex-start;
  flex-direction: column;
  justify-content: flex-start;
}

.row {
  height: 33.33%;
  display: inline-block;
  border: solid #ce7777 10px;
  background-color: #2b3a55;
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffbf00;
  background-color: #2b3a55;
}

Составные свойства

Это свойство является сокращённой записью следующих свойств CSS:

• margin-top
• margin-right
• margin-bottom
• margin-left

Синтаксис

/* apply to all four sides */
margin: 1em;
margin: -3px;

/* top and bottom | left and right */
margin: 5% auto;

/* top | left and right | bottom */
margin: 1em auto 2em;

/* top | right | bottom | left */
margin: 2px 1em 0 auto;

/* anchor-size() values */
margin: 5% anchor-size(width);
margin: calc(anchor-size(width) / 4) 1em 0
  anchor-size(--my-anchor self-inline, 50px);

/* Keyword values */
margin: auto;

/* Global values */
margin: inherit;
margin: initial;
margin: revert;
margin: revert-layer;
margin: unset;

Свойство margin можно задать одним, двумя, тремя или четырьмя значениями. Каждое значение — это <length>, <percentage> или ключевое слово auto. Отрицательные значения приближают элемент к соседним элементам сильнее, чем это было бы по умолчанию.

• Если указано одно значение, оно задаёт одинаковый внешний отступ для всех четырёх сторон.
• Если указаны два значения, первое задаёт внешний отступ для верхней и нижней сторон, а второе — для левой и правой сторон.
• Если указаны три значения, первое задаёт внешний отступ для верхней стороны, второе — для правой и левой сторон, а третье — для нижней стороны.
• Если указаны четыре значения, внешние отступы задаются для верхней, правой, нижней и левой сторон именно в таком порядке (по часовой стрелке).

Значения

<length>

Размер внешнего отступа в виде фиксированного значения.

• Для элементов, позиционируемых относительно якоря, функция anchor-size() вычисляется в значение <length> относительно ширины или высоты соответствующего якорного элемента (см. раздел Задание внешнего отступа элемента на основе размера якоря).

<percentage>

Размер внешнего отступа в процентах относительно строчного размера (в горизонтальном письме — ширины, определяемой свойством writing-mode) содержащего блока.

auto

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

Описание

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

Верхние и нижние внешние отступы не влияют на строчные невоспроизводимые элементы, такие как <span> или <code>.

Горизонтальное центрирование

Вы можете выровнять элемент по центру по горизонтали внутри родителя, задав margin: 0 auto;.

Более распространённый способ горизонтально центрировать элемент — задать display: flex; и justify-content: center; для контейнера. Это центрирует его flex-элементы-потомки.

Схлопывание внешних отступов

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

Формальное определение

Формальный синтаксис

margin = 
  <'margin-top'>{1,4}

Примеры

Базовый пример

HTML

<div class="center">This element is centered.</div>

<div class="outside">This element is positioned outside of its container.</div>

CSS

.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}

Другие примеры

margin: 5%; /* All sides: 5% margin */

margin: 10px; /* All sides: 10px margin */

margin: 1.6em 20px; /* top and bottom: 1.6em margin */
/* left and right: 20px margin */

margin: 10px 3% -1em; /* top:            10px margin */
/* left and right: 3% margin   */
/* bottom:         -1em margin */

margin: 10px 3px 30px 5px; /* top:    10px margin */
/* right:  3px margin  */
/* bottom: 30px margin */
/* left:   5px margin  */

margin: 2em auto; /* top and bottom: 2em margin   */
/* Box is horizontally centered */

margin: auto; /* top and bottom: 0 margin     */
/* Box is horizontally centered */

Спецификации

Совместимость с браузерами

См. также

• margin-top, margin-right, margin-bottom и margin-left
• margin-block-start, margin-block-end, margin-inline-start и margin-inline-end
• Сокращённые свойства margin-block и margin-inline
• Подробно о схлопывании внешних отступов
• Руководство Введение в блочную модель CSS
• Модуль Блочная модель CSS