What are the block and inline axes?

The block axis is the direction text blocks stack, and the inline axis is the direction text runs within a line. In default horizontal English, block is top-to-bottom and inline is left-to-right, but writing-mode and direction can rotate or reverse them.

What does inline-start resolve to in RTL?

In a left-to-right document inline-start is the left side; in a right-to-left (RTL) document it becomes the right side. That automatic flip is the whole point of logical properties — one rule works for both directions.

How do logical properties help with vertical writing modes?

With writing-mode: vertical-rl the block axis runs right-to-left horizontally and the inline axis runs top-to-bottom. Logical properties follow the text flow, so margin-block-start stays at the start of the flow rather than a fixed physical edge.

Can I mix logical and physical properties?

Yes, but it is error-prone. If both target the same side the later cascade wins, and they can fight when direction changes. Prefer one system per component; logical is recommended for internationalised layouts.

Are logical properties widely supported?

Yes. margin/padding/border/inset logical longhands and the inline/block shorthands are supported in all current evergreen browsers. Only a few newer shorthands lag, so check before relying on them.

What is the CSS Logical Properties Reference?

Reference mapping CSS logical properties (margin-inline-start, inset-block-end, etc.) to their physical equivalents, with a writing-mode resolver that shows which physical side each logical side becomes. It runs free in your browser on Gera Tools, with nothing uploaded.

CSS Logical Properties Reference

Name: CSS Logical Properties Reference
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

Write layout that flows, not that hard-codes sides

CSS logical properties describe boxes by their relationship to the text flow — block and inline axes, start and end edges — instead of fixed top, right, bottom, left. This lets one stylesheet adapt to right-to-left and vertical writing modes automatically. This reference maps each logical property to its physical equivalent and resolves which physical side it becomes for any writing mode.

How it works

Two axes replace the four physical sides. The inline axis follows the direction text runs; the block axis follows the direction lines stack. Each has a start and an end:

/* physical, breaks in RTL */
margin-left: 1rem;

/* logical, flips automatically */
margin-inline-start: 1rem;

The resolution depends on writing-mode and direction. In horizontal-tb + ltr, inline-start = left and block-start = top. Switch to direction: rtl and inline-start becomes right. Switch to writing-mode: vertical-rl and block-start becomes the right edge while inline-start becomes the top.

Axis resolution table

writing-mode	direction	block-start	block-end	inline-start	inline-end
horizontal-tb	ltr	top	bottom	left	right
horizontal-tb	rtl	top	bottom	right	left
vertical-rl	ltr	right	left	top	bottom
vertical-lr	ltr	left	right	top	bottom

Common physical-to-logical conversions

Physical property	Logical equivalent
`margin-top`	`margin-block-start`
`margin-left`	`margin-inline-start`
`padding-right`	`padding-inline-end`
`border-bottom`	`border-block-end`
`top`, `left` (positioned)	`inset-block-start`, `inset-inline-start`
`width`	`inline-size`
`height`	`block-size`
`max-width`	`max-inline-size`

The shorthands collapse two edges: margin-inline: auto centres the element horizontally in ltr and rtl equally, replacing the common margin-left: auto; margin-right: auto pattern.

Practical migration tips

Start at the layout level. The highest-leverage swap is replacing margin-left and padding-left with their logical equivalents on navigation items, form labels and list indentation — these are the first things to break in an RTL layout.

Use inset for positioned elements. The inset shorthand is the logical equivalent of setting all four edges at once. inset: 0 replaces top: 0; right: 0; bottom: 0; left: 0. Use inset-inline-start and inset-block-start to position relative to the text flow rather than the screen.

text-align: start replaces text-align: left — it aligns to wherever the line begins regardless of direction.

Tips and notes

Use the *-inline / *-block shorthands (margin-inline: 1rem) for both edges at once.
inset-inline-start / inset-block-end replace left/bottom for positioned boxes.
Logical properties remove most [dir="rtl"] overrides from your stylesheet.
text-align: start and float: inline-end are the logical equivalents of left/right.
Mixing logical and physical on the same side leads to cascade surprises — pick one system per component.