foundation

Logical properties

Use block and inline properties so spacing, borders, and placement follow writing mode and direction.

Logical properties describe edges relative to writing mode: block (paragraph flow) and inline (text direction) instead of physical top, right, bottom, left.

					.card {
  margin-block: 1rem;
  margin-inline: auto;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--accent);
  inset-inline-end: 0;
}

`margin-inline`, `padding-block`, `inset`, `border-inline`, and logical sizing (`inline-size`, `block-size`) adapt when `direction: rtl` or vertical writing modes apply — without duplicate rules.

On interviews: internationalization, RTL support, and why margin-inline beats margin-left for reusable components.

The trade-off is migration effort to logical properties versus duplicated physical rules for every writing mode.

Common pitfalls: mixing physical and logical properties in one component; partial migration without visual regression tests.

Checklist:

Express spacing and position by flow intent.
Test RTL and vertical writing samples.
Migrate utilities consistently.
Map legacy physical classes deliberately.