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

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

 

Синтаксис

/* <lenght> значение */
margin-right: 20px;  /* абсолютная длина */
margin-right: 1em;   /* относительно размера текста */
margin-right: 5%;    /* относительно ширины родительского блока */

/* Значения-ключевые слова */
margin-right: auto;

/* Глобальные значения */
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

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

<length> | <percentage> | auto

Примеры

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

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

Спецификация Статус Комментарии
CSS Basic Box Model
Определение 'margin-right' в этой спецификации.
Рабочий черновик Нет значительных изменений.
CSS Transitions
Определение 'margin-right' в этой спецификации.
Рабочий черновик Определяет margin-right как анимируемое.
CSS Flexible Box Layout Module
Определение 'margin-right' в этой спецификации.
Кандидат в рекомендации Определяет влияние margin-right на flex-элементы.
CSS Level 2 (Revision 1)
Определение 'margin-right' в этой спецификации.
Рекомендация Удалено влияние на строчные элементы.
CSS Level 1
Определение 'margin-right' в этой спецификации.
Рекомендация Первоначальное определение.

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

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
margin-rightChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 3Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android ?
autoChrome Полная поддержка 1Edge Полная поддержка 12
Замечания
Полная поддержка 12
Замечания
Замечания The auto value is not supported in quirks mode.
Firefox Полная поддержка 1IE Полная поддержка 6
Замечания
Полная поддержка 6
Замечания
Замечания The auto value is not supported in quirks mode.
Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка 37Chrome Android Полная поддержка 18Edge Mobile Полная поддержка 12
Замечания
Полная поддержка 12
Замечания
Замечания The auto value is not supported in quirks mode.
Firefox Android Полная поддержка 4Opera Android ? Safari iOS ? Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Совместимость неизвестна  
Совместимость неизвестна
Смотрите замечания реализации.
Смотрите замечания реализации.

Метки документа и участники

Внесли вклад в эту страницу: mdnwebdocs-bot, Kikubaaqudgha
Обновлялась последний раз: mdnwebdocs-bot,