Logical properties: margin-inline, padding-block
Replace left/right/top/bottom with start/end
/* Physical (LTR-only) */
.card { margin-left: 16px; margin-right: 16px; padding-top: 8px; padding-bottom: 8px; }
/* Logical (RTL-aware) */
.card { margin-inline: 16px; padding-block: 8px; }- `-inline` β left/right in LTR languages; right/left in RTL (Arabic, Hebrew).
- `-block` β top/bottom (vertical, regardless of direction).
Why this matters
If your site supports RTL languages (Arabic, Hebrew, Persian), every margin-left is wrong on those layouts. Logical properties auto-flip.
If your site is LTR-only, logical properties STILL win β shorter syntax, clearer intent (margin-inline: 16px says "horizontal margins" without spelling out which sides).
The full set
| Physical | Logical |
margin-left | margin-inline-start |
margin-right | margin-inline-end |
margin-top | margin-block-start |
margin-bottom | margin-block-end |
margin: 8px 16px | margin: 8px 16px (shorthand still works) |
padding-x (none) | padding-inline (sets both inline sides) |
text-align: left | text-align: start |
border-left | border-inline-start |
left: 0 | inset-inline-start: 0 |
Browser support
All evergreen browsers since 2019. Safe everywhere in 2026.
Tailwind uses physical (still)
Tailwind 3.x defaults to ml-4, pt-2, etc. Tailwind 4 (released late 2024) added ms-4 (margin-start), ps-4 (padding-start), text-start. Use the start/end forms in Tailwind 4+ for RTL-ready apps.
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.