Gap

Vertical space measured in the system’s squares.

Design examples

Space between related sections

Example Code

One square separates a title from its details; two squares mark the next section.

Try it

One square of space

Example Code

The gap separates two lines by one 20px square.

Choose a size

Use unit for one square and double for two. The size attribute also selects a scale token, for example size="05" for half a square or size="2" for two squares.

A gap is empty space. It does not wrap content and is not a flexbox gap between children.

Styling and tokens · Row