margin

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨июль 2015 г.⁩.

* Some parts of this feature may have varying levels of support.

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

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

margin: 1em;

margin: 5% 0;

margin: 10px 50px 20px;

margin: 10px 50px 20px 0;

margin: 0;

<section>  <div>    <div></div>    <div></div>    <div></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 свойств:

Синтаксис

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: Браузер выбирает подходящее значение для использования. Например, в некоторых случаях это значение может быть использовано для центрирования элемента.

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

Начальное значение	как и у каждого из подсвойств этого свойства: `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`: процент, как указан, или абсолютная длина
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>Этот элемент отцентрирован.</div><div>  Этот элемент расположен за пределами своего контейнера.</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 *//* блок отцентрирован горизонтально */