In CSS logical properties, what do the block and inline axes mean, and which physical sides do margin-block-start and margin-inline-start map to in a horizontal-tb, left-to-right document?

middlemust knowfreq 55%

answer

text direction versus line stacking
start and end, not left and right
writing-mode plus direction decide the mapping
horizontal-tb ltr: inline-start is left
one stylesheet mirrors itself for RTL

basics

~10 s

The inline axis runs along the text direction; the block axis is the direction lines stack. In writing-mode: horizontal-tb with direction: ltr, margin-inline-start resolves to margin-left and margin-block-start resolves to margin-top.

solid answer

~50 s

Logical properties describe a box relative to text flow instead of the screen. The inline axis is the one text runs along inside a line, so its ends are inline-start (where a line begins) and inline-end. The block axis is the one lines and block boxes stack along, with block-start and block-end. In the default writing-mode: horizontal-tb with direction: ltr, inline-start is left, inline-end is right, block-start is top, block-end is bottom — so margin-inline-start is margin-left and margin-block-start is margin-top. Flip to direction: rtl and only the inline ends swap; switch to a vertical writing mode and the two axes trade places entirely. The mapping is decided by the element's own computed writing-mode and direction, both of which inherit, which is why one logical stylesheet mirrors itself for Arabic or Hebrew without a second build.

Logical properties describe a box relative to text flow instead of the screen. The **inline axis** is the one text runs along inside a line, so its ends are `inline-start` (where a line begins) and `inline-end`. The **block axis** is the one lines and block boxes stack along, with `block-start` and `block-end`. In the default `writing-mode: horizontal-tb` with `direction: ltr`, inline-start is left, inline-end is right, block-start is top, block-end is bottom — so `margin-inline-start` is `margin-left` and `margin-block-start` is `margin-top`. Flip to `direction: rtl` and only the inline ends swap; switch to a vertical writing mode and the two axes trade places entirely. The mapping is decided by the element's own computed `writing-mode` and `direction`, both of which inherit, which is why one logical stylesheet mirrors itself for Arabic or Hebrew without a second build.

code

css · 11 lines

css

.quote {
  border-inline-start: 3px solid #888;
  padding-inline-start: 1rem;
  margin-block: 1.5rem;
  margin-inline: auto;
  max-inline-size: 60ch;
}

[dir="rtl"] .quote {
  /* nothing needed: the bar, padding and max width all mirror themselves */
}

go deeper

for a junior

Learn the vocabulary: inline runs along the text, block is how lines stack, and start/end replace left/right. Be able to translate margin-top and margin-left into their logical names for a normal English page.

for a middle

Be ready to explain that writing-mode and direction, both inherited, resolve the mapping at style time, and to walk through what changes when direction flips versus when writing-mode flips.

for a senior

Show that you know the boundary of the abstraction: box properties mirror, but shadows, transforms, gradients and the four-value physical shorthands do not, so an RTL launch still needs a visual audit.

for a principal

Own the policy question — whether logical properties are the mandated default in the design system, how legacy and third-party CSS is handled, and what a lint rule or codemod enforces so the codebase does not drift into a physical/logical mix.

The problem logical properties solve

Physical CSS names four fixed sides — top, right, bottom, left — anchored to the screen. Text is not anchored to the screen. English runs left-to-right in lines that stack downward; Arabic and Hebrew run right-to-left; Japanese can run top-to-bottom in lines that stack right-to-left. A stylesheet written in physical sides encodes exactly one of those arrangements, so shipping a right-to-left locale historically meant generating a second, mirrored stylesheet.

Logical properties re-describe the box in terms of flow: not "the left side" but "the side where a line of text starts".

The two axes and their four ends

Inline axis — the axis text advances along within a line. Its ends are inline-start (where a line begins) and inline-end (where it ends).
Block axis — the axis along which lines, and block-level boxes, stack. Its ends are block-start (the side the first line sits against) and block-end.

In the default writing-mode: horizontal-tb (horizontal lines, stacking top-to-bottom) with direction: ltr:

Logical	Physical
block-start	top
block-end	bottom
inline-start	left
inline-end	right

Set direction: rtl and only the inline ends swap: inline-start becomes the right side. Set writing-mode: vertical-rl and the axes exchange orientation — the inline axis becomes vertical and the block axis horizontal.

css

.card {
  margin-block-start: 1rem;   /* horizontal-tb ltr -> margin-top */
  margin-block-end: 2rem;     /* -> margin-bottom */
  margin-inline-start: 1rem;  /* -> margin-left, but margin-right in rtl */
  margin-inline-end: 1rem;    /* -> margin-right, but margin-left in rtl */
}

The property families

Every physical box property has a flow-relative counterpart:

Margins: margin-block-start/end, margin-inline-start/end, plus the two-value shorthands margin-block and margin-inline (margin-inline: 1rem 2rem sets start then end).
Padding: padding-block, padding-inline, and the four long-hands.
Borders: border-block-start, border-inline-end, and the component long-hands border-inline-start-width, -style, -color.
Offsets: inset-block-start, inset-inline-end, and the shorthands inset-block, inset-inline.
Sizes: inline-size and block-size, with min-inline-size, max-inline-size, min-block-size, max-block-size.
Corners: border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius — the first word is the block end, the second the inline end.
Values, not just properties: text-align: start and text-align: end are the flow-relative counterparts of left and right.

What decides the mapping

The element's own computed writing-mode and direction. Both are inherited properties, so setting them once near the root cascades to the whole subtree, and setting them on one branch (a quoted Arabic passage inside an English page, say) makes only that branch mirror. Nothing in the resolution needs a build step: the browser resolves the mapping at style time, which is why a single logical stylesheet is correct for both directions simultaneously on the same page.

Sizing behaves exactly like width/height in every other respect — inline-size honours box-sizing the same way, for example. Logical is a naming layer over the same box, not a different box.

Practical wins

margin-inline: auto centres a block along the text axis — the direction-agnostic replacement for margin: 0 auto.
padding-inline: 1rem is the standard gutter that stays a gutter in both directions.
border-inline-start: 3px solid is the blockquote bar that moves to the correct side automatically.

Pitfalls worth naming

"Inline means horizontal" — only in horizontal writing modes. The word refers to text flow, not to the screen.
The four-value shorthands are still physical. margin: 1rem 2rem 3rem 4rem and inset: 0 1rem remain top/right/bottom/left order; there is no shipped four-side logical margin shorthand, so mixed codebases still contain physical shorthands.
Non-box properties do not follow. box-shadow offsets, transform: translateX(), background-position: left, and gradient direction keywords stay physical no matter how logical your margins are.
Mixing physical and logical declarations for the same side creates order-dependent cascade behaviour rather than a clean override.

Logical box properties are supported across all current browsers, so on a greenfield stylesheet there is no compatibility argument for preferring the physical names.

## The problem logical properties solve Physical CSS names four fixed sides — `top`, `right`, `bottom`, `left` — anchored to the screen. Text is not anchored to the screen. English runs left-to-right in lines that stack downward; Arabic and Hebrew run right-to-left; Japanese can run top-to-bottom in lines that stack right-to-left. A stylesheet written in physical sides encodes exactly one of those arrangements, so shipping a right-to-left locale historically meant generating a second, mirrored stylesheet. Logical properties re-describe the box in terms of *flow*: not "the left side" but "the side where a line of text starts". ## The two axes and their four ends - **Inline axis** — the axis text advances along within a line. Its ends are `inline-start` (where a line begins) and `inline-end` (where it ends). - **Block axis** — the axis along which lines, and block-level boxes, stack. Its ends are `block-start` (the side the first line sits against) and `block-end`. In the default `writing-mode: horizontal-tb` (horizontal lines, stacking top-to-bottom) with `direction: ltr`: | Logical | Physical | |---|---| | block-start | top | | block-end | bottom | | inline-start | left | | inline-end | right | Set `direction: rtl` and only the inline ends swap: inline-start becomes the right side. Set `writing-mode: vertical-rl` and the axes exchange orientation — the inline axis becomes vertical and the block axis horizontal. ```css .card { margin-block-start: 1rem; /* horizontal-tb ltr -> margin-top */ margin-block-end: 2rem; /* -> margin-bottom */ margin-inline-start: 1rem; /* -> margin-left, but margin-right in rtl */ margin-inline-end: 1rem; /* -> margin-right, but margin-left in rtl */ } ``` ## The property families Every physical box property has a flow-relative counterpart: - **Margins**: `margin-block-start/end`, `margin-inline-start/end`, plus the two-value shorthands `margin-block` and `margin-inline` (`margin-inline: 1rem 2rem` sets start then end). - **Padding**: `padding-block`, `padding-inline`, and the four long-hands. - **Borders**: `border-block-start`, `border-inline-end`, and the component long-hands `border-inline-start-width`, `-style`, `-color`. - **Offsets**: `inset-block-start`, `inset-inline-end`, and the shorthands `inset-block`, `inset-inline`. - **Sizes**: `inline-size` and `block-size`, with `min-inline-size`, `max-inline-size`, `min-block-size`, `max-block-size`. - **Corners**: `border-start-start-radius`, `border-start-end-radius`, `border-end-start-radius`, `border-end-end-radius` — the first word is the block end, the second the inline end. - **Values, not just properties**: `text-align: start` and `text-align: end` are the flow-relative counterparts of `left` and `right`. ## What decides the mapping The element's own computed `writing-mode` and `direction`. Both are inherited properties, so setting them once near the root cascades to the whole subtree, and setting them on one branch (a quoted Arabic passage inside an English page, say) makes only that branch mirror. Nothing in the resolution needs a build step: the browser resolves the mapping at style time, which is why a single logical stylesheet is correct for both directions simultaneously on the same page. Sizing behaves exactly like `width`/`height` in every other respect — `inline-size` honours `box-sizing` the same way, for example. Logical is a naming layer over the same box, not a different box. ## Practical wins - `margin-inline: auto` centres a block along the text axis — the direction-agnostic replacement for `margin: 0 auto`. - `padding-inline: 1rem` is the standard gutter that stays a gutter in both directions. - `border-inline-start: 3px solid` is the blockquote bar that moves to the correct side automatically. ## Pitfalls worth naming 1. **"Inline means horizontal"** — only in horizontal writing modes. The word refers to text flow, not to the screen. 2. **The four-value shorthands are still physical.** `margin: 1rem 2rem 3rem 4rem` and `inset: 0 1rem` remain top/right/bottom/left order; there is no shipped four-side logical `margin` shorthand, so mixed codebases still contain physical shorthands. 3. **Non-box properties do not follow.** `box-shadow` offsets, `transform: translateX()`, `background-position: left`, and gradient direction keywords stay physical no matter how logical your margins are. 4. **Mixing physical and logical declarations for the same side** creates order-dependent cascade behaviour rather than a clean override. Logical box properties are supported across all current browsers, so on a greenfield stylesheet there is no compatibility argument for preferring the physical names.

If only direction changes from ltr to rtl, which logical sides move and which stay put?
Only the inline ends move: `inline-start` swaps from the left side to the right side and `inline-end` swaps the other way. The block axis is untouched, so `block-start` remains the top and `block-end` the bottom, because `direction` describes text flow within a line, not how lines stack.
Is there a logical equivalent of the four-value margin shorthand?
No shipped one. `margin` with multiple values is still physical top/right/bottom/left order. The logical shorthands are two-value and per-axis: `margin-block: 1rem 2rem` and `margin-inline: 1rem 2rem`, each taking start then end. In practice you write two declarations instead of one, which is the small tax for direction independence.
How do the logical border-radius corner names work?
Each is `border-<block-end>-<inline-end>-radius`. `border-start-start-radius` is the corner at block-start and inline-start — the top-left corner in horizontal-tb ltr, the top-right in rtl. The other three are `border-start-end-radius`, `border-end-start-radius` and `border-end-end-radius`. They matter for asymmetric shapes like chat bubbles that must flip with direction.

saying these in an interview costs you the question

Says the inline axis is always the horizontal one
Claims block-start is the top regardless of writing-mode
Thinks logical properties are pure aliases with no mapping logic
Believes margin: 1rem 2rem 3rem 4rem is already flow-relative
Assumes logical properties also mirror shadows and transforms

In CSS logical properties, what do the block and inline axes mean, and which physical sides do margin-block-start and margin-inline-start map to in a horizontal-tb, left-to-right document?

§ answer

basics

solid answer

code

§ go deeper

▾level notes4 levels

▾deep dive~3 min

The problem logical properties solve

The two axes and their four ends

The property families

What decides the mapping

Practical wins

Pitfalls worth naming

▾common follow-ups3 questions

▾red flags5 flags

§ context

▾related questions5 questions

▾related topics3 topics

The problem logical properties solve

The two axes and their four ends

The property families

What decides the mapping

Practical wins

Pitfalls worth naming

answer

go deeper

context