Logical Properties
Write layouts in terms of start/end and inline/block so they flip automatically for right-to-left languages.
Physical properties like margin-left and padding-right assume the world reads left-to-right, top-to-bottom. The moment your site needs Arabic or Hebrew — which flow right-to-left — every hard-coded left and right becomes a bug. Logical properties describe direction by flow instead, and adapt on their own.
| Physical | Logical |
|---|---|
margin-left / right | margin-inline-start / end |
margin-top / bottom | margin-block-start / end |
width / height | inline-size / block-size |
text-align: left | text-align: start |
The shorthands you'll actually reach for
margin-inline: auto— the new, honest way to center a block horizontally.padding-block: 1rem— top and bottom padding in one go.margin-inline-start— “leading” margin that becomes right in RTL.
Even if you only ever ship English, logical properties read cleanly and future-proof you for free. Modern codebases use them by default.
Example
When to use it
- A developer uses margin-inline-start instead of margin-left so the same stylesheet correctly applies left margin in LTR and right margin in RTL Arabic layouts.
- A designer replaces all padding-left and padding-right with padding-inline to make a component automatically support both LTR and RTL text directions.
- A developer uses border-block-end instead of border-bottom on a heading so the decorative underline stays under the text in both horizontal and vertical writing modes.
More examples
Inline logical properties for RTL
Uses padding-inline and border-inline-start so the nav item padding and left border flip automatically in RTL layouts.
.nav-item {
/* Works correctly in both LTR and RTL */
padding-inline: 16px;
margin-inline-end: 8px;
border-inline-start: 3px solid #2965f1;
}Block logical properties
Sets vertical spacing and a bottom border using block-axis logical properties that adapt to the document's writing mode.
.section {
padding-block: 48px; /* top and bottom */
margin-block-end: 32px; /* bottom in horizontal, left in vertical */
border-block-end: 1px solid #eee;
}Full physical-to-logical migration
Shows each physical property replaced with its logical equivalent that works across LTR, RTL, and vertical writing modes.
/* Physical (LTR-only) */
.card { margin-left: auto; margin-right: auto; }
/* Logical (LTR and RTL) */
.card {
margin-inline: auto; /* replaces margin-left + margin-right */
padding-block-start: 24px; /* replaces padding-top */
inset-inline-start: 0; /* replaces left: 0 */
}
Discussion