Logical Properties

Logical properties replace `left`/`right` and `top`/`bottom` with `start`/`end` — automatically adapting to the writing direction.

3 min read Level 2/5 #css#logical-properties#i18n

What you'll learn

Use logical property equivalents
Build i18n-friendly layouts

Most CSS properties are tied to physical directions — top, right, bottom, left. Logical properties use abstract directions — block and inline, start and end — that flip automatically based on the document’s writing direction.

Physical vs Logical

Physical	Logical
`margin-left`	`margin-inline-start`
`margin-right`	`margin-inline-end`
`margin-top`	`margin-block-start`
`margin-bottom`	`margin-block-end`
`margin-left` + `margin-right`	`margin-inline`
`margin-top` + `margin-bottom`	`margin-block`
`padding-left`	`padding-inline-start`
`border-left`	`border-inline-start`
`width`	`inline-size`
`height`	`block-size`
`text-align: left`	`text-align: start`

Why It Matters

For a left-to-right language (English), margin-inline-start == margin-left. For a right-to-left language (Arabic, Hebrew), margin-inline-start automatically becomes margin-right.

/* Old (physical) — needs duplication for RTL */
.btn {
  padding-left: 1rem;
  padding-right: 0.5rem;
}
[dir="rtl"] .btn {
  padding-left: 0.5rem;
  padding-right: 1rem;
}

/* New (logical) — works for both directions */
.btn {
  padding-inline-start: 1rem;
  padding-inline-end: 0.5rem;
}

When To Use Which

For internationalized sites — always logical
For one-language sites — use what reads cleaner. Logical is futureproof and tracks intent better (“start of line” vs “left side”)

Composite Shorthand

margin: 1rem 2rem;            /* physical: block-axis, inline-axis */
padding-block: 1rem;          /* both block sides (top+bottom in horizontal writing) */
padding-inline: 2rem;         /* both inline sides */

For full physical-to-logical translation, the spec covers inset-block-start for top, etc.

Up Next

Fluid typography with clamp().

Fluid Typography →