margin-right

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

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

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

Синтаксис

css
/* Ключевые слова */
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-element> || <anchor-size> ]? , <length-percentage>? )

<anchor-element> =
<dashed-ident>

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

Примеры

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

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

Specification
CSS Box Model Module Level 3
# margin-physical
Начальное значение0
Применяется квсе элементы, кроме элементов с табличным типом display, отличным от table-caption, table и inline-table. Это также применяется к ::first-letter.
Наследуетсянет
Процентыссылается на ширину содержащего блока
Обработка значенияпроцент, как указан, или абсолютная длина
Animation typeдлина

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

BCD tables only load in the browser