Logical Properties

The plain-language idea

Physical properties — margin-left, padding-top, border-right, left/right in positioning — describe a direction relative to the physical screen: literally left, literally top. That's fine as long as every user reads the page the same way. It breaks the moment a page needs to support a right-to-left (RTL) language like Arabic or Hebrew, where content flows the opposite direction, or a vertical writing mode, where text stacks top-to-bottom instead of flowing left-to-right.

Logical properties describe the same spacing and positioning relative to the flow of content, not the physical screen:

• inline = the direction text flows within a line (left-to-right in English, right-to-left in Arabic, top-to-bottom in some vertical scripts).
• block = the direction lines stack (normally top-to-bottom).

So margin-left becomes margin-inline-start, and padding-top + padding-bottom together become the shorthand padding-block. These automatically flip when direction or writing-mode changes — no separate RTL stylesheet, no manually mirrored values, no JavaScript flipping classes based on locale.

See it in a real thing: a card component that needs to just work in RTL

/* physical — silently wrong the moment direction: rtl is set */
.card {
  margin-left: 1rem;
  padding-left: 1.5rem;
  border-left: 3px solid var(--color-accent);
}

/* logical — correct in both directions automatically */
.card {
  margin-inline-start: 1rem;
  padding-inline-start: 1.5rem;
  border-inline-start: 3px solid var(--color-accent);
}

With the physical version, an Arabic-locale page (direction: rtl set on html or via the dir attribute) still puts the card's accent border and extra spacing on the left, which is now the trailing, wrong side — content visually reads as if it were mirrored incorrectly. With the logical version, inline-start automatically means "left" in an LTR context and "right" in an RTL context, so the same CSS produces the correct visual result in both, with zero conditional logic.

What people usually miss

Watch out

• inline is the direction text flows within a line; block is the direction lines stack. In standard English LTR horizontal text, inline maps to horizontal (left/right) and block maps to vertical (top/bottom) — but that mapping is exactly what flips under RTL or vertical writing modes, which is the entire point.
• The shorthand pattern mirrors the physical one: margin-inline sets both inline-start and inline-end (like margin-left/margin-right together), margin-block sets both block-start and block-end (like margin-top/margin-bottom together) — so adopting logical properties isn't more verbose once you're used to the shorthands.
• inset is the logical replacement for top/right/bottom/left in positioning, with inset-inline-start, inset-block-end, etc. as the individual-side versions — people often remember logical margin/padding but forget positioning has the same physical-property problem.
• This only matters for genuinely direction-relative properties. Something like width or height doesn't have a physical/logical distinction the same way spacing and position do (though inline-size/block-size exist as the logical equivalents of width/height for vertical writing modes specifically) — don't over-apply the pattern where it doesn't add anything.
• Support is Baseline / widely available now for the common logical properties (margin, padding, border, inset), so there's little reason left to default to physical properties purely for compatibility — the honest caveat is some of the less common logical shorthands are newer and worth checking before leaning on them for a hard RTL requirement shipping soon.

Why this matters in interviews

Logical properties come up as a genuine i18n-awareness signal in interviews and code review — "how would you make this component work for an RTL locale?" is a real question, and reaching for inline-start/block-start instead of hardcoded left/top by default is exactly the kind of detail that separates someone who's actually shipped an internationalized product from someone who hasn't had to yet.