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

Синтаксис

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 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 */
/* блок отцентрирован горизонтально */