Spacer

An invisible block whose only job is to push apart the blocks above and below it. Nothing is drawn — it just takes up height.

Each screen size gets its own height, the same way a section’s padding does, so you can open up a generous gap on desktop without leaving a huge hole on a phone.

Use it when two blocks in the same section need more air between them than the section’s own spacing provides. If every block in the section needs more room, adjust the section’s padding instead.

Settings

Setting	What it does
Height (Mobile)	Space added on phones. 0–10rem in 0.5 steps. Defaults to 2 (32px).
Height (Tablet)	Space added on tablets and up. Defaults to 3 (48px).
Height (Desktop)	Space added on desktop and up. Defaults to 4 (64px).
Block ID	Optional anchor ID.

Heights are in rem: 1 = 16px, so 2 = 32px, 4.5 = 72px. Set a height to 0 to remove the gap entirely at that screen size — useful when you only want extra space on desktop.

The heights stack, they don’t override

Tablet applies at tablet width and up, desktop applies at desktop width and up. So mobile is the base value and each larger size replaces it. There’s no way to make tablet larger than desktop without also raising desktop.

It’s decorative, not structural

The spacer is hidden from screen readers, which is correct — but it also means it can’t be used to imply a break in the content. If two groups of blocks are genuinely separate things, they should be two sections, not one section with a spacer in the middle.

Tips

• Reach for section padding first. A spacer between every pair of blocks is a sign the section’s padding is set too tight.
• Steps are 0.5rem (8px). If a gap looks half a step off, it probably needs a change to the surrounding blocks rather than a finer spacer value.
• Empty space is cheap to add and easy to forget. Check the page on a phone after adding one — a 4rem gap that reads as breathing room on desktop can read as a broken page on a 375px screen.