CSS Logical Properties Reference
Map physical CSS properties (margin-left) to logical ones (margin-inline-start).
Overview
The CSS Logical Properties Reference maps every physical CSS property (e.g. margin-left, padding-top, border-right) to its logical equivalent (margin-inline-start, padding-block-start, border-inline-end). The list covers margin, padding, border, inset, size, and float, with brief notes on which corresponds to which writing mode direction.
This is the lookup you reach for when localising a site into right-to-left or vertical-writing languages — Arabic, Hebrew, Japanese vertical — and need to swap your stylesheet from physical to logical sides without breaking left-to-right layouts. Useful for front-end engineers and accessibility specialists learning how to convert margin-left to margin-inline-start or how to make CSS layouts RTL-friendly.
How it works
The CSS Logical Properties Module Level 1 defines two axes: inline (horizontal in LTR/RTL writing modes, vertical in vertical-writing) and block (perpendicular to inline). The -start and -end keywords replace -left/-right/-top/-bottom and follow the writing mode.
When the document switches to RTL via direction: rtl, margin-inline-start automatically becomes the right-hand margin, and the layout mirrors without you touching CSS. The reference also flags physical properties without a 1:1 logical replacement (like top / left for absolute positioning, which have inset-block-start and inset-inline-start as replacements).
Examples
margin-left: 1rem→margin-inline-start: 1rem(matches in LTR, becomes right margin in RTL).padding-top: 1rem→padding-block-start: 1rem.border-right: 1px solid→border-inline-end: 1px solid.text-align: left→text-align: start.
FAQ
Should I always use logical properties?
For new code, yes — they cost nothing in LTR and unlock automatic RTL support. The exception is when you genuinely mean a physical side (a logo always pinned to the visual right).
What about shorthand properties like margin?
margin: 1rem 2rem still works and is interpreted as logical-aware in some browsers, but mixing shorthand with logical-only properties (margin-inline) is the cleanest path. padding-inline and padding-block are shorthand for the two ends.
Are logical properties fully supported?
All evergreen browsers support the main set. The newer inset-* properties and some of the shorthand are also widely supported as of 2023.
Does float have a logical equivalent?
Yes — float: inline-start and float: inline-end. Less common because float-based layouts are mostly retired.