W3docs
ru
Войти

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

Используйте это свойство для задания отступа справа от элемента. Значения свойства и примеры.

CSS-свойство margin-right задаёт ширину области отступа справа от элемента — прозрачного пространства между правой границей элемента и соседним содержимым или содержащим блоком.

Это одно из четырёх отдельных свойств отступа — наряду с margin-top, margin-bottom и margin-left — которые сокращённое свойство margin устанавливает одновременно. Используйте margin-right, когда нужно изменить только правый отступ: например, отделить встроенную иконку от следующего за ней текста или отдвинуть плавающий элемент от рядом расположенного содержимого.

На этой странице описан синтаксис свойства, все допустимые значения (включая auto, % и отрицательные длины), а также правила, которые стоит знать перед его использованием.

Информация

Отрицательные значения допускаются. Отрицательное значение margin-right притягивает следующее содержимое ближе (или даже перекрывает его), что иногда полезно для эффектов наложения, но может приводить к неожиданным результатам в макете.

Начальное значение0
Применяется кВсем элементам. Также применяется к ::first-letter.
НаследуетсяНет.
АнимируемостьДа. Правый отступ элемента поддаётся анимации.
ВерсияCSS2
DOM Syntaxobject.style.marginRight = "50px";

Синтаксис

margin-right: length | auto | initial | inherit;

Примеры

Фиксированная длина в пикселях

Простейший случай: зарезервируйте фиксированное пространство справа. Здесь абзац сохраняет отступ 400px с правой стороны, поэтому он больше не растягивается на всю ширину контейнера.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .right {
        margin-right: 400px;
      }
    </style>
  </head>
  <body>
    <h2>Margin-right property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="right">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>
Попробуйте сами »

Результат

Абзац с правым отступом 400px, отображаемый уже, чем окружающий текст

Значение в процентах

Когда значение задаётся в процентах, оно вычисляется относительно ширины содержащего блока — а не ширины самого элемента. Таким образом, margin-right: 50% создаёт отступ, равный половине ширины содержимого родительского элемента.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .right {
        margin-right: 50%;
      }
    </style>
  </head>
  <body>
    <h2>Margin-right property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="right">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>
Попробуйте сами »

Значение auto

Для блочного элемента margin-right: auto позволяет браузеру заполнить всё доступное пространство справа. Само по себе это значение почти не видно, но в сочетании с margin-left: auto это классический приём для горизонтального центрирования блока фиксированной ширины. Если задать только margin-right: auto (при margin-left: 0), блок прижимается к левому краю.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .right {
        margin-right: auto;
      }
    </style>
  </head>
  <body>
    <h2>Margin-right property example</h2>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
    <p class="right">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
  </body>
</html>
Попробуйте сами »

Значения

ЗначениеОписаниеПример
autoЗадаёт правый отступ. Это значение по умолчанию для данного свойства.Попробовать »
lengthОпределяет правый отступ в px, pt, cm и т.д. Значение по умолчанию — 0.Попробовать »
%Задаёт правый отступ в процентах от ширины содержащего элемента.Попробовать »
initialУстанавливает значение свойства по умолчанию.Попробовать »
inheritНаследует значение свойства от родительского элемента.

Что важно помнить

  • Отступы прозрачны. В отличие от внутренних отступов (padding), отступ располагается за пределами границы и никогда не отображает фоновый цвет элемента.
  • Правые отступы не схлопываются. Схлопывание отступов происходит только между смежными вертикальными отступами (margin-top / margin-bottom). Горизонтальные отступы, такие как margin-right, всегда суммируются.
  • Проценты ссылаются на ширину. Значение в % вычисляется относительно ширины содержащего блока, даже несмотря на то что оно управляет горизонтальным пространством.
  • Альтернатива через сокращённое свойство. Если нужно задать несколько сторон сразу, сокращённое свойство margin компактнее: margin: 0 400px 0 0 эквивалентно margin-right: 400px с нулями для остальных сторон.

Практика

Практика
Что делает CSS-свойство 'margin-right'?
Что делает CSS-свойство 'margin-right'?
Was this page helpful?