Прежде чем разбирать конкретные свойства, нужно усвоить одну идею. Имена логических свойств строятся не из «left/right/top/bottom», а из двух других понятий — inline и block. На них держится всё остальное в этом мануале, поэтому давайте на пальцах разберёмся, что они значат.

Inline и block

Inline — это направление, по которому идут символы внутри одной строки. Block — направление, перпендикулярное ему, по которому строки выкладываются одна под другой.

Для привычного европейского текста (горизонтально, слева направо):

  • inline — горизонтально, слева направо;
  • block — вертикально, сверху вниз.

Для арабского:

  • inline — горизонтально, но справа налево;
  • block — так же, сверху вниз.

Для классического японского (writing-mode: vertical-rl):

  • inline — вертикально, сверху вниз (символы строки идут именно так);
  • block — горизонтально, справа налево (новые «строки» добавляются именно туда).

Главное здесь: оси inline и block не привязаны к экрану. Они зависят от направления и режима письма. Логические свойства — те, что описывают отступы, размеры и границы по этим осям, а не по физическим left/right/top/bottom. Подробный разбор самих режимов письма — в отдельной статье про CSS Writing Modes.

Start и end

У каждой оси есть две стороны — start (где начинается строка или блок) и end (где заканчивается). Из них и собираются имена свойств:

  • inline-start — начало строки. Лево в LTR, право в RTL, верх в vertical-rl.
  • inline-end — конец строки. Зеркально к предыдущему.
  • block-start — начало блока. Верх для горизонтального текста, правый край контейнера для vertical-rl.
  • block-end — конец блока.

Когда читаете margin-inline-start — в голове разворачивается: «отступ с той стороны, где начинается строка». Браузер сам подставит left, right или top в зависимости от writing-mode и direction.

Как задаётся направление

Направление задаётся в двух местах. Первый — HTML, через атрибут dir:

<html lang="ar" dir="rtl">
<section dir="rtl" lang="he">...</section>

Второй — CSS, свойствами direction (горизонтальное LTR/RTL) и writing-mode (для вертикальных режимов):

.rtl-block { direction: rtl; }
.vertical { writing-mode: vertical-rl; }

Если есть выбор — задавайте через HTML-атрибут. Так направление будет правильным даже если CSS не загрузится.

Зачем это нужно даже на одном языке

Можно подумать: «у меня сайт только на одном языке, RTL мне не светит, зачем городить логические свойства?». На самом деле они полезны и в одноязычной вёрстке. Самый частый кейс — заголовок, который при увеличении ширины поворачивается через writing-mode:

.section-title {
  border-inline-start: 4px solid crimson;
  padding-inline-start: 12px;
  writing-mode: vertical-rl;
}

@container (min-width: 520px) {
  .section-title {
    writing-mode: horizontal-tb;
  }
}

На узком экране — красная полоска сверху у заголовка. На широком — заголовок станет горизонтальным и полоска окажется слева. Одно правило, два визуальных результата. С физическим border-left при повороте полоска всегда была бы на одном месте.

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