Отступы — margin-inline, padding-block и шорткаты

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

margin

У margin восемь логических свойств плюс две удобные парные формы:

• margin-inline-start / margin-inline-end — левый/правый отступ для LTR-текста, обратные стороны для RTL.
• margin-block-start / margin-block-end — верхний/нижний отступ для горизонтального текста.
• margin-inline — шорткат для обоих inline-отступов сразу.
• margin-block — шорткат для обоих block-отступов.

Самый ценный из них — margin-inline: auto для горизонтального центрирования блока:

.modal {
  inline-size: 480px;
  margin-inline: auto;
}

Раньше для того же эффекта писали margin-left: auto; margin-right: auto или короткое margin: 0 auto — но второе обнуляет ещё и вертикальные отступы, что не всегда хочется. margin-inline: auto — точно одно действие: центрирование, ничего лишнего.

Запись с двумя значениями

Шорткаты margin-inline и margin-block принимают одно или два значения. Два — это start и end по соответствующей оси:

.notice {
  margin-inline: 16px 24px;  /* start: 16px, end: 24px */
  margin-block: 0 12px;      /* start: 0, end: 12px */
}

padding

У padding зеркальный набор: padding-inline-start / -end, padding-block-start / -end и шорткаты padding-inline / padding-block. Поведение и синтаксис — точно такие же.

.button {
  padding-inline: 16px;
  padding-block: 8px;
}

Это эквивалент padding: 8px 16px в горизонтальной LTR-вёрстке. Разница — в читаемости: padding требует помнить порядок «вертикаль/горизонталь», а padding-inline/padding-block читаются как описание, без необходимости вспоминать соглашение.

Сводная таблица логических отступов