margin-right

Baseline Широко распространённый

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

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

Попробовать

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

Синтаксис

/* <length> values */
margin-right: 20px; /* An absolute length */
margin-right: 1em; /* relative to the text size */
margin-right: 5%; /* relative to the nearest block container's width */

/* Keyword values */
margin-right: auto;

/* Global values */
margin-right: inherit;
margin-right: initial;
margin-right: revert;
margin-right: revert-layer;
margin-right: unset;

Свойство margin-right задаётся как ключевое слово auto, или <length>, или <percentage>. Его значение может быть положительным, нулевым или отрицательным.

Значения

<length>

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

<percentage>

Размер отступа в процентах, относительно размера в строке (ширина в горизонтальной ориентации, определяемой writing-mode) контейнера.

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

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

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

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

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%;
}
.side-box {
  margin-right: 10px;
}
.logo {
  margin-right: -5px;
}

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

Спецификация
CSS Box Model Module Level 3 # margin-physical

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`margin-right`	1	12	1	3.5	1	18	4	10.1	1	1.0	4.4
`auto`	1	12 Значение `auto` не поддерживается в режиме quirks.	1	3.5	1	18	4	14	1	1.0	37

См. также

margin-top, margin-bottom и margin-left
margin сокращение
margin-block-start, margin-block-end, margin-inline-start и margin-inline-end
margin-block и margin-inline сокращения
CSS модель бокса модуль

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right