Please note: vertical block spacing is currently in beta. Please reach out to support@rocketspark.com if you would like early access
You can adjust the vertical spacing between blocks to achieve certain design layouts. This feature is handy if you want to sit a heading tight against its paragraph so they read as one, spread a set of images out into a staggered layout, or close a gap to zero so two pictures meet edge to edge.
To use this feature, you'll need design mode switched on. It's the small Rocketspark icon in the editor toolbar. If you're not sure what design mode changes, have a read of how to edit blocks with design mode on and off first.
Adjusting the space
- Log in to your dashboard and open the editor.
- Switch design mode on.
- Hover over the block you'd like to move down. A horizontal bar appears along its top edge.
- Click and drag that bar down to add space above the block, or up to reduce it.
- Let go when it looks right. Your change saves on its own.
The space is shaded while you drag, so you can see exactly how much you're adding. Drag it all the way back up to zero and the two blocks will sit flush against each other, which is lovely for stacked images.
This works on just about every block, so text, headings, pictures, grid galleries, buttons, videos and more.
Keeping your spacing consistent
The spacing bar snaps to your website's spacing increments, so you're not eyeballing it pixel by pixel. Learn more about spacing increments
If your increment is set to 10, every drag lands on 10, 20, 30 and so on. Set it to 8 and you get 8, 16, 24, 32. That snapping is what makes it easy to line blocks up across different columns just by dragging, because the same numbers keep coming up.
You can set this once in your sitewide design settings and it applies across your whole website. There's more in our guide on spacing increments and how to get consistent spacing across your entire website.
Pick your increment to suit the job. A small number like two or four gives you fine control when you're fussing over a hero section, while a bigger number like 30 keeps a long page marching along in a nice rhythm.
Adding space below a block
The bar sits on the top edge of a block, so you're always adding space above something.
Use vertical alignment. If your block is the last one in its column and there's nothing underneath it, you can change the vertical alignment. Your content will sit against the bottom of the stack, and you can then use the space above it to push it into position. Middle alignment is handy here too, as it shares the available space out on both sides.
Click the 3 dots for more settings to find the vertical alignment options (or go into the stack width and spacing settings)
What happens when you copy or duplicate
Your spacing travels with your content, which saves a heap of repetitive work.
- Copy a block and the copy keeps the same spacing.
- Copy a whole stack and every block in it keeps its spacing, so building three matching columns is a case of getting one right and copying it twice.
- Linked content carries the spacing across to wherever that stack appears.
- Sliders keep the spacing on each slide as it was copied, and adjusting the spacing on one slide only affects that slide, so you can vary them if you'd like to.
How it looks on mobile
Mobile is handled for you. When your website reflows to a single column on a phone, the space between blocks is adjusted automatically so a generous desktop gap doesn't leave your visitors scrolling through empty screen.
A couple of things to know:
- Zero stays zero. If you've closed a gap completely on desktop, the blocks stay flush on mobile too, so edge to edge picture designs hold up.
- Large gaps are eased in. A big desktop gap still gives you extra breathing room on mobile, just a more modest amount.
- Your desktop value is untouched. Only the mobile display is adjusted, so nothing is lost.
Setting your own separate spacing for mobile isn't available yet. It's something we're actively looking at, and it's high on the list for what comes next.
Tip: if you're using spacing to line up columns of text with headings of different lengths, check your mobile preview once you're done. Those columns stack into one on a phone, so it's worth a quick look to make sure it still reads nicely.
Common questions
Where's the bar? I can't see it.
Check that design mode is switched on, then hover over the block rather than clicking it. The bar sits right on the block's top edge.
I've selected a block and the bar has gone.
The spacing bar and the other stack handles step out of the way while a block is selected so you get a clear view of what you're editing. Click off the block, or press Esc, and it comes straight back.
There's a handle on the right of my block too. Is that the same thing?
No, that one adjusts the gap between columns. When a block runs the full width of its column the two can sit quite close together, so it's worth a second look before you drag. The spacing bar is always horizontal and always on the top edge.
Can I set the spacing to an exact number instead of dragging?
Not directly on the block, but setting your spacing increments gives you precise, repeatable values every time you drag, which gets you to the same place with less fuss.
Does this work on stack spacing too?
Stack spacing is a separate control for the space around the outside of a whole stack. Our guide on how to turn on design mode and edit in-context covers that one, along with the other in-context stack handles.
Give it a play on a test page and you'll get a feel for it in a couple of minutes. If you get stuck, our support team is right here.