Block and inline

Learn block and inline axis concepts.

What are the block and inline axes?

The CSS logical model defines two axes: the block axis is the direction in which text breaks to a new line; the inline axis is the direction text flows within a line.

In horizontal-tb mode, the block axis is vertical (top to bottom) and the inline axis is horizontal. In vertical-rl mode, the block axis is horizontal (right to left) and the inline axis is vertical. Axes are layout, not direction.

Along the block and inline axes

For block-axis offsets use margin-block, padding-block and inset-block. For the inline axis there are margin-inline, padding-inline and inset-inline.

These names follow axes; instead of saying physical 'top' or 'left', you say 'block start' or 'inline start'. When the writing mode changes, the physical edge they map to adapts automatically.

Putting axes to work

Writing axis-based declarations brings consistency on multilingual and multi-direction pages. A single .card class looks the same in Turkish, Arabic and Japanese layouts.

To get there, swap physical top, right, bottom, left for their logical counterparts. text-align: start follows the same idea; it aligns to the writing direction.

Exercise Axis-based margins

Write two declarations on the .quote selector: margin-block: 2rem and margin-inline: 1rem. Both must live in the same block.

Show example solution

/* axis-based margins */
.quote {
  margin-block: 2rem;
  margin-inline: 1rem;
}

Test yourself

In horizontal-tb mode, which is the block axis?
- Horizontal, left to right
- Horizontal, right to left
- Diagonal
- Vertical, top to bottom
Show answer

Vertical, top to bottom — Correct. In horizontal-tb mode the block axis runs top to bottom.

Inline-axis margin

.row { ____: 1rem; }

Show answer

.row { margin-inline: 1rem; }

Match each axis term to its meaning

Block axis

New line direction
Inline axis

Same line direction
margin-block-start

Block start edge
margin-inline-end

Line end edge

Next lesson: Direction and unicode-bidi

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies