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.

CSS Logical Properties Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, 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.

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.