CSS Logical Properties
CSS logical properties use flow-relative directions (inline / block) instead of physical directions (left / right / top / bottom), making layouts work correctly in both LTR and RTL writing modes.
Margin
| Physical | Logical | LTR maps to | RTL maps to |
|---|---|---|---|
| margin-top | margin-block-start | margin-top | margin-top |
| margin-bottom | margin-block-end | margin-bottom | margin-bottom |
| margin-left | margin-inline-start | margin-left | margin-right |
| margin-right | margin-inline-end | margin-right | margin-left |
Padding
| Physical | Logical |
|---|---|
| padding-top | padding-block-start |
| padding-bottom | padding-block-end |
| padding-left | padding-inline-start |
| padding-right | padding-inline-end |
Border
| Physical | Logical |
|---|---|
| border-top | border-block-start |
| border-bottom | border-block-end |
| border-left | border-inline-start |
| border-right | border-inline-end |
Sizing & Position
| Physical | Logical |
|---|---|
| width | inline-size |
| height | block-size |
| min-width | min-inline-size |
| max-width | max-inline-size |
| min-height | min-block-size |
| max-height | max-block-size |
| top | inset-block-start |
| bottom | inset-block-end |
| left | inset-inline-start |
| right | inset-inline-end |