margin

Базовая Широко распространённая

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

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

Попробовать

Составляющие свойства

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

Синтаксис

/* 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;

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

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

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

Значения

<length>: Размер отступа как фиксированное значение.
<percentage>: Размер отступа в процентах, относительно размера в строке (ширина в горизонтальном языке, определённом writing-mode) блока-контейнера.
auto: Браузер выбирает подходящий отступ. Например, в некоторых случаях это значение можно использовать для центрирования элемента.

Описание

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

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

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

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

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

Слияние отступов

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

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

Начальное значение	как каждое из свойств сокращения: `margin-bottom`: `0` `margin-left`: `0` `margin-right`: `0` `margin-top`: `0`
Применимо к	всем элементам, кроме элементов с типами таблицы `display` отличными от `table-caption`, `table` и `inline-table`. Также применяется к `::first-letter`.
Наследуется	нет
Проценты	отсылают к ширине блока-контейнера
Вычисленное значение	как каждое из свойств сокращения: `margin-bottom`: заданный процент или абсолютная длина `margin-left`: заданный процент или абсолютная длина `margin-right`: заданный процент или абсолютная длина `margin-top`: заданный процент или абсолютная длина
Тип анимации	длина

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

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

<margin-top> = 
  <length-percentage>  |
  auto                 |
  <anchor-size()>      

<length-percentage> = 
  <length>      |
  <percentage>  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline

Примеры

Простой пример

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 */

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

Спецификация
CSS Box Model Module Level 3 # margin

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`margin`	1	12	1	3.5	1	18	4	10.1	1	1.0	4.4
`auto`	1	12 Значение `auto` не поддерживается в режиме quirks.	1	3.5	1	18	4	14	1	1.0	37

См. также

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 бокс-модель модуль

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/margin