margin-inline

Определение и применение

Свойство margin-inline задаёт внешний отступ в начале и в конце строки. Стороны выбираются по направлению письма, поэтому один стиль подходит для текста слева направо, справа налево и вертикальных надписей.

Чем логические отступы отличаются от отступов слева и справа — в уроке «Блочная и строчная модель. Часть 1: области блока и отступы».

Попробуйте значения margin-inline

Выберите отступ: он применяется сразу к трём блокам. Жёлтый фон контейнера помогает увидеть пространство снаружи их рамок. Сравните 8px 28px при письме слева направо и справа налево: отступы поменяются местами. При вертикальном письме они окажутся сверху и снизу. Расстояние между соседними блоками задаётся отдельно через margin-block и при переключении значений не меняется.

Значение свойстваmargin-inline: 0;margin-inline: 12px;margin-inline: 8px 28px;

Что меняем

margin-inline: 0

HTML и CSS примера

HTML

<div class="stage">
  <div class="container" dir="ltr" style="writing-mode: horizontal-tb">
    <div class="demo-target">Блок 1</div>
    <div class="demo-target">Блок 2</div>
    <div class="demo-target">Блок 3</div>
  </div>
</div>

HTML

<div class="stage">
  <div class="container" dir="rtl" style="writing-mode: horizontal-tb">
    <div class="demo-target">Блок 1</div>
    <div class="demo-target">Блок 2</div>
    <div class="demo-target">Блок 3</div>
  </div>
</div>

HTML

<div class="stage">
  <div class="container" dir="ltr" style="writing-mode: vertical-rl">
    <div class="demo-target">Блок 1</div>
    <div class="demo-target">Блок 2</div>
    <div class="demo-target">Блок 3</div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 400px;
  padding: 12px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.container {
  display: flow-root;
  width: 100%;
  height: 200px;
  background: #fff0bf;
  border: 1px dashed #6d5d32;
}
.demo-target {
  margin-block: 8px;
  padding: 6px;
  border: 1px solid #245a85;
  background: #b9d7eb;
  margin-inline: 0;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 400px;
  padding: 12px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.container {
  display: flow-root;
  width: 100%;
  height: 200px;
  background: #fff0bf;
  border: 1px dashed #6d5d32;
}
.demo-target {
  margin-block: 8px;
  padding: 6px;
  border: 1px solid #245a85;
  background: #b9d7eb;
  margin-inline: 12px;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 400px;
  padding: 12px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.container {
  display: flow-root;
  width: 100%;
  height: 200px;
  background: #fff0bf;
  border: 1px dashed #6d5d32;
}
.demo-target {
  margin-block: 8px;
  padding: 6px;
  border: 1px solid #245a85;
  background: #b9d7eb;
  margin-inline: 8px 28px;
}

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

Спецификация: CSS logical

Поддерживается во всех основных браузерах с 2021 года.

ВсеКомпьютерыМобильные

Совместимостьcss.properties.margin-inline
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`margin-inline`	✓87	✓87	✓66	✓73	✓14.1	✓87	✓66	✓62	✓14.5	✓14.0	✓87	✓14.5
`anchor-size`	✓132	✓132	✓147	✓117	✓26	✓132	✓147	✓87	✓26	✓29.0	✓132	✓26
`auto`	✓87	✓87	✓66	✓73	✓14.1	✓87	✓66	✓62	✓14.5	✓14.0	✓87	✓14.5

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Логические отступы широко поддерживаются; функция anchor-size() требует отдельной проверки и не нужна для обычной адаптации к направлению письма.

CSS синтаксис:

CSS

margin-inline: [ auto | <length-percentage> | <anchor-size()> ]{1,2};

/* Глобальные значения */
margin-inline: initial | inherit | unset | revert | revert-layer;

{1,2} означает одно или два значения: первое для начала оси, второе для конца; одно применяется к обеим сторонам. | разделяет варианты, квадратные скобки группируют их. <length-percentage> — длина или процент; допустимы отрицательные значения. <anchor-size()> — функция расчёта по размерам якоря.

JavaScript синтаксис:

JavaScript

element.style.marginInline = "1rem 2rem";

Начальное значение свойства

margin-inline-start — 0.
margin-inline-end — 0.

Значения свойства

Значения margin-inline
Значение	Описание
`<length>`	Длина, например `16px` или `1rem`. Отрицательный отступ может сблизить элементы или привести к перекрытию.
`<percentage>`	Процент от логической ширины содержащего блока — размера вдоль его строчной оси. Даже отступ перед блоком не следует автоматически рассчитывать от высоты.
`auto`	Автоматический отступ, результат зависит от раскладки. Пара автоматических отступов может центрировать блок, если его размер меньше доступного.
`anchor-size()`	Расчёт отступа по размерам якорного элемента. Новое расширение с ограниченной поддержкой; требует корректно связанного якоря.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для ненаследуемого свойства `margin-inline` устанавливает его начальное значение свойства.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Чем margin-inline отличается от margin

margin задаёт отступы сразу со всех четырёх физических сторон: сверху, справа, снизу и слева. margin-inline управляет только двумя логическими сторонами — началом и концом строки. Отступы по другой, блочной оси он не меняет.

При обычном горизонтальном письме разница выглядит так:

CSS

/* По 16px со всех четырёх сторон */
margin: 16px;

/* Сверху и снизу — 0, справа и слева — 16px */
margin: 0 16px;

/* Слева и справа — 16px, сверху и снизу — без изменений */
margin-inline: 16px;

Два значения тоже читаются по-разному: margin: 16px 32px задаёт по 16px сверху и снизу, по 32px справа и слева. У margin-inline: 16px 32px первое значение относится к началу строки, второе — к концу: при горизонтальном письме слева направо это 16px слева и 32px справа, а верхний и нижний отступы сохраняются.

Какие преимущества это даёт

Можно менять боковые отступы, сохраняя расстояния между блоками. Например, центрировать карточку, не сбрасывая уже заданные отступы сверху и снизу.
Разные отступы в начале и в конце строки адаптируются к направлению текста. При горизонтальном письме справа налево margin-inline: 16px 32px задаст 16px справа и 32px слева. Переписывать правило для этого направления не нужно. Если оба отступа одинаковы, их перестановка визуально ничего не меняет.
Один стиль подходит и для вертикального письма. Строчная ось становится вертикальной, поэтому отступы окажутся сверху и снизу. У margin физические стороны остаются прежними.

Например, у обычного блока ограниченной ширины при горизонтальном письме можно сохранить внешние отступы сверху и снизу и отдельно настроить центрирование:

CSS

.card {
  width: 240px;
  margin: 24px 0;
  margin-inline: auto;
}

Если контейнер шире 240px, боковые отступы auto центрируют карточку, а сверху и снизу остаётся по 24px. Замена последней строки на margin: 0 auto тоже центрирует карточку, но обнулит верхний и нижний отступы. У обычного блока, занимающего всю доступную ширину, свободного места по бокам нет, поэтому margin-inline: auto не даст видимого смещения.

Для независимой настройки обеих осей сочетайте margin-inline с margin-block, который задаёт отступы перед блоком и после него. Когда нужно задать все четыре отступа сразу, margin остаётся удобным сокращением.

От логической стороны к физической

При writing-mode: horizontal-tb отступ находится слева и справа. При direction: rtl начало и конец строки меняются местами. В вертикальном письме строчная ось идёт вертикально.

Не задавайте одновременно логический и физический отступ одной стороны без необходимости: после сопоставления сторон они конкурируют по обычным правилам каскада. Внешний отступ остаётся за рамкой и не закрашивается фоном. Отступы по блочной оси обычных блоков могут схлопываться; во Flexbox и Grid такого схлопывания нет.

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

CSS Logical Properties and Values — margin-inline.

Наследуется

Нет.

Анимируемое

Да, по вычисленному значению: промежуточные значения рассчитываются плавно. Переход с auto — дискретный.

Примеры, попробуйте сами

Отступы по направлению строки

У блока заданы разные отступы: в начале оси меньше, в конце больше. В HTML замените dir="ltr" на dir="rtl": стороны поменяются местами. Пустое пространство находится снаружи рамки.

base.css

CSS

body {
    margin: 1rem;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #243342;
    background: #fff;
}
* {
    box-sizing: border-box;
}
.frame {
    display: flow-root;
    border: 2px dashed #64748b;
    min-height: 180px;
}
.sample {
    width: fit-content;
    background: #fef3c7;
    border: 2px solid #92400e;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Отступы по направлению строки</title>
  </head>
  <body>
    <div class="frame"><div class="sample" dir="ltr">Заметки о прогулке</div></div>
  </body>
</html>

style.css

CSS

.sample {
    writing-mode: horizontal-tb;
    margin-inline: 12px 40px;
}

margin-inline

Определение и применение

Попробуйте значения margin-inline

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

Начальное значение свойства

Значения свойства

Чем margin-inline отличается от margin

Какие преимущества это даёт

От логической стороны к физической

Связанные логические свойства

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

Наследуется

Анимируемое

Примеры, попробуйте сами

Отступы по направлению строки