CSS-свойство `margin-right`

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

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

Попробуйте

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: rgb(229 232 252 / 0.6);
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffc129;
  background-color: rgb(255 244 219 / 0.6);
}

Синтаксис

/* <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 */
margin-right: anchor-size(self-block);
margin-right: calc(anchor-size(--my-anchor height, 20px) / 4);

/* 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>

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

• Для элементов, позиционируемых относительно якоря функция anchor-size() вычисляется в значение типа <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

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

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

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;
}

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

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

См. также

• margin-top, margin-bottom и margin-left
• сокращённое свойство margin
• margin-block-start, margin-block-end, margin-inline-start и margin-inline-end
• сокращённые свойства margin-block и margin-inline
• модуль блочной модели CSS