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