What Are CSS Logical Properties? Direction-Aware Layout

CSS logical properties size, space, and position elements relative to the document’s writing mode and text direction rather than to fixed physical sides like top, right, bottom, and left. Instead of margin-left, you write margin-inline-start; instead of width, you can write inline-size. The layout then adapts automatically when the writing mode changes — most commonly, when a page needs to support a right-to-left language.

Physical vs logical: the core distinction

Traditional CSS box model properties are physical — top, right, bottom, left, width, height — they always refer to the same screen direction no matter what language the content is in. Logical properties instead describe two abstract axes:

• Block axis — the direction blocks stack, typically top-to-bottom in horizontal writing modes.
• Inline axis — the direction text flows within a line, left-to-right in English, right-to-left in Arabic or Hebrew, and top-to-bottom in some vertical scripts.

So margin-inline-start means “the margin at the start of the inline axis” — the left margin in English, but automatically the right margin in Arabic, with zero extra code.

Common physical-to-logical mappings

Physical	Logical (horizontal LTR equivalent)
width	inline-size
height	block-size
margin-left	margin-inline-start
margin-right	margin-inline-end
margin-top	margin-block-start
margin-bottom	margin-block-end
padding-left / padding-right	padding-inline-start / padding-inline-end
border-left	border-inline-start
text-align: left	text-align: start

Shorthand versions exist too: margin-inline: 1rem 2rem sets both inline-start and inline-end margins in one declaration, mirroring what margin-left/margin-right used to require as two separate lines.

Why this matters even for English-only sites

It’s tempting to dismiss logical properties as only relevant if you’re localizing into right-to-left languages. Two reasons that’s incomplete:

1. You might localize later, and retrofitting physical CSS for RTL support usually means a parallel stylesheet or a library that flips left/right at build time — brittle compared to properties that were direction-aware from the start.
2. Vertical writing modes exist even for English content in specific contexts — table headers, certain design layouts — and logical properties handle the block/inline swap automatically where physical properties can’t.

If your site will only ever ship in one language and one writing mode, physical properties are simpler and there’s no strong reason to migrate. The value shows up the moment direction becomes a variable instead of a constant.

Working alongside logical layout tools

Logical properties pair naturally with layout modes that were already writing-mode aware. CSS Grid and Flexbox use logical concepts internally — justify-content operates along the inline axis, align-items along the block axis — so a grid or flex layout built with logical properties throughout stays consistent when direction changes, without any of the individual item rules needing a rewrite.

The CSS box model itself doesn’t change — padding, border, and margin still stack the same way — logical properties just change which physical side each rule targets.

Browser support and practical adoption

Logical properties are broadly supported in current browsers, and the practical way to adopt them isn’t a big-bang rewrite — introduce them incrementally as you touch a component, or use them by default in new code while leaving stable legacy CSS alone. Testing is simple: set direction: rtl on a container in devtools and confirm your logical-property layout mirrors correctly, which is the sanity check physical properties can’t pass without extra CSS.

The takeaway

CSS logical properties replace physical top/right/bottom/left thinking with block/inline axes tied to writing direction, so a layout mirrors correctly for right-to-left content without a second stylesheet. Adopt them incrementally in new components — margin-inline, padding-block, and inset-inline-start cover most of what you’d otherwise reach for margin-left or top to do, with direction-awareness built in for free.