CSS Logical Properties
Physical properties like margin-left or border-top describe a direction on screen — left is always left, top is always top, regardless of language. Logical properties describe a direction relative to the flow of content instead — "the side text starts from," "the side it ends at" — and that distinction stops being academic the moment your site needs to support a right-to-left language or a vertical writing mode.
Physical vs Logical: The Property Map
Physical (direction-specific) | Logical (flow-relative) |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
In the default horizontal, left-to-right writing mode (English and most Western languages), inline maps to horizontal and block maps to vertical — so margin-inline-start behaves exactly like margin-left. The moment the writing mode or text direction changes, logical properties automatically flip to match, while physical properties stay pinned to the screen edge you named.
Why It Matters for Internationalization
Set dir="rtl" on the <html> element (or use a language like Arabic or Hebrew that requires it) and "start" flips to the right side of the screen. Recap: writing-mode covers vertical text direction, where inline and block axes rotate entirely. Logical properties track both of these automatically — physical properties do not, and require a whole parallel set of RTL overrides to correct.
Before / After: The Same Layout, Two Approaches
/* BEFORE: physical properties — wrong once dir="rtl" is set */
.card {
margin-left: 16px;
padding-left: 24px;
padding-right: 12px;
border-left: 4px solid #4a90d9;
text-align: left;
}
/* Fixing RTL support the old way required a whole parallel ruleset: */
[dir="rtl"] .card {
margin-left: 0;
margin-right: 16px;
padding-left: 12px;
padding-right: 24px;
border-left: none;
border-right: 4px solid #4a90d9;
text-align: right;
}/* AFTER: logical properties — correct in LTR and RTL automatically,
with zero [dir="rtl"] overrides needed */
.card {
margin-inline-start: 16px;
padding-inline: 24px 12px; /* start end */
border-inline-start: 4px solid #4a90d9;
text-align: start;
}The logical version needs no [dir="rtl"] block at all — setting dir="rtl" anywhere up the document flips every one of those -inline-start / -inline-end values to the correct physical side automatically, because the browser recalculates which edge "start" currently means.
Shorthands Worth Knowing
margin-inline: 16px 24pxsets start and end in one declaration (likemargin-inline-start: 16px; margin-inline-end: 24px;).margin-inline: 16px(a single value) sets both inline sides to the same value, same pattern forpadding-inlineandborder-inline.inset: 0(all four logical insets at once) is the modern, direction-agnostic replacement fortop: 0; right: 0; bottom: 0; left: 0;.inline-size/block-size(and theirmin-/max-variants) replacewidth/heightwhen you want sizing to respect writing mode too.