CSS Logical Properties
Logical properties adapt to writing-mode and direction (LTR/RTL), making CSS truly internationalized.
Physical โ Logical Property Mapping
| Physical (old) | Logical (new) | Notes |
|---|---|---|
| width | inline-size | Horizontal in LTR |
| height | block-size | Vertical in LTR |
| min-width / max-width | min-inline-size / max-inline-size | |
| margin-left | margin-inline-start | Flips in RTL |
| margin-right | margin-inline-end | |
| margin-top | margin-block-start | |
| margin-bottom | margin-block-end | |
| padding-left | padding-inline-start | |
| padding-right | padding-inline-end | |
| border-left | border-inline-start | |
| top | inset-block-start | |
| left | inset-inline-start | |
| text-align: left | text-align: start | |
| float: left | float: inline-start |
Shorthand Logical Properties
/* inline = horizontal (left/right in LTR) */ margin-inline: 16px; /* = margin-left + margin-right */ padding-inline: 24px 16px; /* start end */ /* block = vertical (top/bottom) */ margin-block: 8px 16px; /* = margin-top + margin-bottom */ padding-block: 12px; /* inset = all sides */ inset: 0; /* = top/right/bottom/left */ inset-inline: 0 auto; /* left=0, right=auto */
RTL Layout Example
/* Works for BOTH Arabic (RTL) and English (LTR) */
.nav-item {
padding-inline-start: 16px; /* left in LTR, right in RTL */
border-inline-start: 3px solid var(--primary);
margin-inline-end: 8px;
}
/* Activate RTL */
html[dir="rtl"] { direction: rtl; }