margin-right

Свойство CSS margin-right устанавливает внешний отступ справа от элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное - сокращает.

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

margin-right: 1em;

margin-right: 10%;

margin-right: 10px;

margin-right: 0;

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

#container {
 width: 300px;
 height: 200px;
 display: flex;
 align-content: flex-start;
 justify-content: flex-start;
}
.col {
 width: 33.33%;
 border: solid #5b6dcd 10px;
 background-color: rgba(229, 232, 252, 0.6);
 flex-shrink: 0;
}
#example-element {
 border: solid 10px #ffc129;
 background-color: rgba(255, 244, 219, 0.6);
}

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

Синтаксис

/* Ключевые слова */
margin-right: auto;
/* Значения длины */
margin-right: 20px; /* абсолютная длина */
margin-right: 1em; /* относительно размера текста */
margin-right: 5%; /* относительно ширины родительского блока */
/* Глобальные значения */
margin-right: inherit;
margin-right: initial;
margin-right: unset;

Свойство margin-right может быть выражено как ключевое слово auto, как <число>, или как <процент>. Значение может быть положительным, нулевым или отрицательным.

Значения

<length>

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

<percentage>

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

auto

Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном выбранным способом разметки. Если значения margin-left и margin-right одновременно установлены как auto, расчётное пространство распределяется равномерно. Эта таблица кратко излагает различные:

Значение display	Значение float	Значение position	Расчётное значение auto	Комментарий
inline, inline-block, inline-table	любое	static или relative	0	Строчный способ разметки
block, inline, inline-block, block, table, inline-table, list-item, table-caption	любое	static или relative	0, кроме случаев, когда margin-left и margin-right установлены как auto. В этом случае устанавливается значение, центрирующее элемент внутри его родителя	Блочный способ разметки
block, inline, inline-block, block, table, inline-table, list-item, table-caption	left или right	static или relative	0	Блочный способ разметки (плавающие элементы)
любое table-*, кроме table-caption	любое	любое	0	Внутренние table-* элементы не имеют отступов, вместо этого используйте border-spacing
любое, кроме flex, inline-flex, или table-*	любое	fixed или absolute	0, кроме случаев, когда margin-left и margin-right установлены как auto. В этом случае, устанавливается значение центрирующее границы области внутри доступной width (ширины), если значение фиксировано.	Способ разметки абсолютным позиционированием
flex, inline-flex	любое	любое	0, кроме случаев, когда есть положительное горизонтальное свободное пространство. В этом случае, распределяется равномерно по всем горизонтальным auto отступам.	Способ разметки с помощью flexbox

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

margin-right = 
 <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 

Примеры

.content {
 margin-right: 5%;
}
.sidebox {
 margin-right: 10px;
}
.logo {
 margin-right: -5px;
}

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

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