margin-inline-start

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

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

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

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

<div class="stage">
  <nav dir="ltr">
    <span>Каталог</span><span class="demo-target">Корзина</span>
  </nav>
</div>

<div class="stage">
  <nav dir="rtl">
    <span>Каталог</span><span class="demo-target">Корзина</span>
  </nav>
</div>

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
nav {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px dashed #52697d;
  min-height: 100px;
}
nav span {
  padding: 8px;
  background: #b9d7eb;
}
.demo-target {
  margin-inline-start: 0;
}

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
nav {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px dashed #52697d;
  min-height: 100px;
}
nav span {
  padding: 8px;
  background: #b9d7eb;
}
.demo-target {
  margin-inline-start: 24px;
}

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
nav {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px dashed #52697d;
  min-height: 100px;
}
nav span {
  padding: 8px;
  background: #b9d7eb;
}
.demo-target {
  margin-inline-start: auto;
}

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

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

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

Показать браузеры

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

Совместимостьcss.properties.margin-inline-start

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
margin-inline-start	✓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 синтаксис:

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

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

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

JavaScript синтаксис:

element.style.marginInlineStart = "auto";

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

0.

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

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

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

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

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

• margin-left всегда задаёт отступ слева. margin-inline-start следует за началом строки: при горизонтальном письме слева направо отступ находится слева, а при письме справа налево — справа. Это удобно для компонентов, которые должны работать при обоих направлениях текста.
• margin-inline задаёт сразу оба отступа по строчной оси. margin-inline-start меняет только отступ в начале, сохраняя уже заданный отступ в конце строки.
• margin-inline-end задаёт отступ с противоположной стороны — в конце строки. В меню с display: flex и flex-direction: row значение margin-inline-start: auto у последнего пункта занимает свободное место перед ним, а margin-inline-end: auto у первого пункта — после него. В обоих случаях эффект виден, если в строке осталось свободное место.

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

• margin-inline
• margin-inline-end

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

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

Наследуется

Нет.

Анимируемое

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

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

Последний пункт у конца строки

У ссылки «Корзина» автоматический отступ забирает свободное место перед ней. Замените в HTML dir="ltr" на dir="rtl": отступ перейдёт на другую сторону. Сравните с margin-left: auto.

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;
}
a {
    color: #1d4ed8;
}

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>
    <nav class="menu" dir="ltr" aria-label="Каталог">
      <a href="#catalog">Каталог</a><a class="cart" href="#cart">Корзина</a>
    </nav>
  </body>
</html>

style.css

CSS

.menu {
    display: flex;
    gap: 12px;
}
.cart {
    margin-inline-start: auto;
}