CSS Logical Properties: Writing Direction-Agnostic Layouts
Learn CSS logical properties that replace physical directions (left, right, top, bottom) with flow-relative equivalents. Essential for internationalization and RTL language support.
Key Takeaways
- Traditional CSS uses physical directions: `margin-left`, `padding-right`, `border-top`.
- margin: 1rem 2rem; /* top/bottom, left/right */
- Logical properties are supported in all modern browsers (Chrome 87+, Firefox 66+, Safari 15+).
- New projects should use logical properties by default — even if you only support LTR today, it future-proofs the codebase.
Physical vs Logical Properties
Traditional CSS uses physical directions: margin-left, padding-right, border-top. These break in right-to-left (RTL) languages like Arabic and Hebrew — a margin-left that adds space before content in English adds space after content in Arabic. Logical properties use flow-relative directions that automatically adapt.
Property Mapping
| Physical | Logical | Meaning |
|---|---|---|
margin-left |
margin-inline-start |
Before content (in writing direction) |
margin-right |
margin-inline-end |
After content |
margin-top |
margin-block-start |
Before block (typically top) |
margin-bottom |
margin-block-end |
After block (typically bottom) |
width |
inline-size |
Size in writing direction |
height |
block-size |
Size perpendicular to writing |
text-align: left |
text-align: start |
Align to writing start |
Shorthand Properties
/* Physical shorthand */
margin: 1rem 2rem; /* top/bottom, left/right */
/* Logical equivalents */
margin-block: 1rem; /* block-start and block-end */
margin-inline: 2rem; /* inline-start and inline-end */
Browser Support
Logical properties are supported in all modern browsers (Chrome 87+, Firefox 66+, Safari 15+). For projects requiring older browser support, use physical properties with [dir=rtl] overrides as a fallback.
When to Adopt
New projects should use logical properties by default — even if you only support LTR today, it future-proofs the codebase. For existing projects, migrate incrementally during refactoring. The CSS is identical in LTR — logical properties only change behavior in RTL contexts.
Generate and preview logical property CSS with the Peasy CSS tools.