Что такое logical properties в CSS (margin-inline и т.д.)?

Question

Accepted Answer

## Физика vs логика

`margin-left` привязан к «левой стороне экрана». **Logical properties** привязаны к осям письма: **inline** (направление строки) и **block** (направление блоков).

```css
.panel {
  margin-inline: 1rem;          /* start+end */
  padding-block: 0.5rem 1rem;
  border-inline-start: 3px solid var(--accent);
  inset-inline-end: 0;          /* вместо right в LTR */
}
```

В `rtl` `margin-inline-start` автоматически оказывается «справа». То же для `writing-mode: vertical-*`.

## Итог

Logical properties — интернационализация и вертикальный текст без ветвления `dir=rtl` для каждого отступа.