margin

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CSS свойство margin определяет внешний отступ на всех четырёх сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: margin-top, margin-right, margin-bottom и margin-left.

Интерактивный пример

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

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

Синтаксис

css
/* Применяется ко всем четырём сторонам */
margin: 1em;
margin: -3px;

/* по вертикали | по горизонтали */
margin: 5% auto;

/* сверху | горизонтально | снизу */
margin: 1em auto 2em;

/* сверху | справа | снизу | слева */
margin: 2px 1em 0 auto;

/* Глобальные значения */
margin: inherit;
margin: initial;
margin: unset;

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

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

Значения

<length>

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

<percentage>

Размер отступа в процентах относительно ширины родительского блока.

auto

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

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

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

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

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

html
<div class="center">Этот элемент отцентрирован.</div>

<div class="outside">
  Этот элемент расположен за пределами своего контейнера.
</div>

CSS

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

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

Больше примеров

css
margin: 5%;
/* все стороны:  отступ 5% */

margin: 10px;
/* все стороны:  отступ 10px */

margin: 1.6em 20px;
/* верх и низ:   отступ 1.6em */
/* право и лево: отступ 20px */

margin: 10px 3% 1em;
/* верх:         отступ 10px */
/* право и лево: отступ 3% */
/* низ:          отступ 1em */

margin: 10px 3px 30px 5px;
/* верх:   отступ 10px */
/* право:  отступ 3px */
/* низ:    отступ 30px */
/* лево:   отступ 5px */

margin: 2em auto;
/* верх и низ: отступ 2em */
/* блок отцентрирован горизонтально */

margin: auto;
/* верх и низ: отступ 0 */
/* блок отцентрирован горизонтально */

Примечание

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

Чтобы центрировать что-то горизонтально в современных браузерах, вы можете использовать display: flex; justify-content: center; .

Однако в старых браузерах, таких как IE8-9, которые не поддерживают технологию Flexible Box, они недоступны. Чтобы центрировать элемент внутри своего родителя, используйте margin: 0 auto; .

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

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

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

Specification
CSS Box Model Module Level 3
# margin

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

BCD tables only load in the browser

Смотрите также