CSS Logical Properties: Write RTL-Ready CSS From Day One
Logical properties replace physical directions (top, left, right, bottom) with logical ones (start, end, inline, block) that automatically adapt to writing direction and text flow.
U
UIXplor Team
February 25, 2026 · 5 min read
✦
01Physical vs Logical Properties
Physical properties are tied to screen directions:
| Physical | Logical | Meaning | |----------|---------|-------| | `margin-left` | `margin-inline-start` | Start of text flow | | `margin-right` | `margin-inline-end` | End of text flow | | `padding-top` | `padding-block-start` | Start of block flow | | `width` | `inline-size` | Size along text axis | | `height` | `block-size` | Size across text axis |
02Practical Examples
css
/* Physical — breaks in RTL */
.icon { margin-right: 0.5rem; }
/* Logical — works in LTR and RTL */
.icon { margin-inline-end: 0.5rem; }
/* Border example */
.selected { border-left: 3px solid #B8FB3C; } /* physical */
.selected { border-inline-start: 3px solid #B8FB3C; } /* logical */
/* Inset shorthand */
.card { inset: 0; } /* top: 0; right: 0; bottom: 0; left: 0; */Related UI Components
Related Articles