margin-inline-end

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

Свойство margin-inline-end задаёт внешний отступ у конца строки (англ. end — конец). Его задают элементу, после которого нужно оставить пространство по направлению текста. При обычном письме слева направо это отступ справа, а при письме справа налево — слева. Остальные три отступа свойство не меняет.

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

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

Меняйте отступ после первого пункта «Лавка»: 24px оставляет фиксированный промежуток, auto занимает свободное место до остальных пунктов. Сравните направления письма: справа налево отступ окажется слева от «Лавки», а при вертикальном письме — снизу. Для эффекта auto все три пункта должны помещаться в одну строку.

Значение свойстваmargin-inline-end: 0;margin-inline-end: 24px;margin-inline-end: auto;

Что меняем

margin-inline-end: 0

HTML и CSS примера

HTML

<div class="stage">
  <div class="menu" dir="ltr">
    <span class="demo-target">Лавка</span><span>Товары</span><span>Вход</span>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 420px;
  padding: 8px;
  background: white;
  color: #172c3d;
  font: 14px/1.5 system-ui;
}
.menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px dashed #52697d;
  min-height: 100px;
  background: #fff0bf;
}
.menu span {
  padding: 6px;
  border: 1px solid #245a85;
  background: #b9d7eb;
}
.vertical {
  writing-mode: vertical-rl;
  height: 220px;
}
.demo-target {
  margin-inline-end: 0;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 420px;
  padding: 8px;
  background: white;
  color: #172c3d;
  font: 14px/1.5 system-ui;
}
.menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px dashed #52697d;
  min-height: 100px;
  background: #fff0bf;
}
.menu span {
  padding: 6px;
  border: 1px solid #245a85;
  background: #b9d7eb;
}
.vertical {
  writing-mode: vertical-rl;
  height: 220px;
}
.demo-target {
  margin-inline-end: 24px;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 420px;
  padding: 8px;
  background: white;
  color: #172c3d;
  font: 14px/1.5 system-ui;
}
.menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px dashed #52697d;
  min-height: 100px;
  background: #fff0bf;
}
.menu span {
  padding: 6px;
  border: 1px solid #245a85;
  background: #b9d7eb;
}
.vertical {
  writing-mode: vertical-rl;
  height: 220px;
}
.demo-target {
  margin-inline-end: auto;
}

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

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

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

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

Совместимостьcss.properties.margin-inline-end
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`margin-inline-end`	✓69	✓79	✓41	✓56	✓12.1	✓69	✓41	✓48	✓12.2	✓10.0	✓87	✓12.2
`anchor-size`	✓132	✓132	✓147	✓117	✓26	✓132	✓147	✓87	✓26	✓29.0	✓132	✓26
`auto`	✓69	✓79	✓41	✓56	✓12.1	✓69	✓41	✓48	✓12.2	✓10.0	✓69	✓12.2

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

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

CSS синтаксис:

CSS

margin-inline-end: [ auto | <length-percentage> | <anchor-size()> ];

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

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

JavaScript синтаксис:

JavaScript

element.style.marginInlineEnd = "auto";

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

0.

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

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

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

При writing-mode: horizontal-tb отступ находится справа при dir="ltr" и слева при dir="rtl". Направление также можно задать свойством direction. При writing-mode: vertical-rl, direction: ltr и стандартном text-orientation: mixed конец строки находится снизу, поэтому отступ появится под элементом.

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

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

margin-right всегда задаёт отступ справа. margin-inline-end следует за концом строки: это удобно, когда компонент должен работать и при письме слева направо, и при письме справа налево.
margin-inline задаёт сразу оба отступа по строчной оси. margin-inline-end меняет только отступ в конце, сохраняя уже заданный отступ в начале строки.
margin-inline-start задаёт отступ с противоположной стороны — в начале строки. Например, в горизонтальном меню margin-inline-start: auto у последнего пункта оставляет свободное место перед ним, а margin-inline-end: auto у первого пункта — после него.

Как auto разделяет пункты меню

В меню с display: flex и flex-direction: row задайте первому пункту margin-inline-end: auto. Если в строке есть свободное место, отступ займёт его после первого пункта, а остальные пункты окажутся у конца строки. При dir="rtl" стороны поменяются местами, но порядок элементов в HTML останется прежним.

Значение auto не создаёт свободное место: если пункты занимают всю строку, автоматический отступ будет нулевым. В примере ниже разрешён перенос, и свободное место распределяется отдельно в каждой строке. Для наблюдения разделения группы все пункты должны помещаться в одну строку.

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

CSS Logical Properties and Values — margin-inline-end.

Наследуется

Нет.

Анимируемое

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

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

Свободное место после первого пункта

У пункта «Лавка» margin-inline-end: auto забирает свободное место после него, отделяя его от остальных пунктов. Замените в HTML dir="ltr" на dir="rtl": отступ перейдёт справа налево. Сравните с margin-right: auto. Затем замените auto на 24px. Если пункты переносятся, рекомендую открыть пример кнопкой «Развернуть пример», чтобы увидеть распределение свободного места в одной строке.

base.css

CSS

body {
    margin: 1rem;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #243342;
    background: #fff;
}
* {
    box-sizing: border-box;
}
.menu {
    padding: 12px;
    border: 2px solid #64748b;
}
.menu span {
    padding: 6px;
    border: 1px solid #245a85;
    background: #b9d7eb;
}

index.html