Adjust the Space Between Blocks

While working on the layout of your site, you may wish to change or remove spacing between different elements on the page. This guide will share several methods you can use to control the space between blocks of content.

In this guide

1. Use the Block Spacing Settings
2. Remove Empty Blocks
3. Additional Methods

Use the Block Spacing Settings

With Block Spacing settings, you can control the space between two blocks.

This setting appears for nested blocks. Nested blocks are blocks inside of other blocks. For example, the Gallery block contains individual Image blocks, and the Columns block contains individual columns.

For blocks that are not nested, you can group them together to access the Block Spacing settings. To remove space between two blocks that are not nested, place them inside a Group block following these steps:

1. Open List View and look for the blocks you wish to remove the spacing between.
2. Click on the first block to select it.
3. Hold the Shift key on your keyboard and click on the second block. This will select both blocks.
4. Click the ellipses (three dots) to open up the options.
5. Select Group. The two blocks will be placed inside a Group block.
6. In the Group block‘s settings on the right side, locate the Dimensions settings within the Styles tab.
   • The Styles tab icon looks like a black-and-white circle:
   • 
7. Under Block Spacing, you will see a slider. Click on the Set custom size icon.
   • The icon looks like two horizontal lines with a dot on each one:
   • 
8. Type the number 0 as the custom size.
   • Note: An empty value in the box will use the default spacing. A zero must be typed in the box to ensure no space between the blocks.

These steps are demonstrated in this video:

Slow down or speed up the video using the controls in the lower right corner after clicking Play

Remove Empty Blocks

If there’s extra space showing on a page and you’re not sure where it’s coming from, check there are no empty blocks in the page content.

Open List View to view a list of all the blocks on the page. If any blocks have no content, such as an empty Group or Paragraph block, remove the block by clicking the ellipses (three dots) and selecting Delete.

An example of empty blocks creating unwanted space

Additional Methods

There are other methods you can explore to add, remove, or change the gap between elements on your site:

• Insert a Spacer block to add space anywhere onto a page or post.
• Similar to the Block Spacing method described above, you can control the Padding Settings around many blocks. Padding is the space around the outside of a block, inside the border.
• Similar to the Block Spacing method described above, you can control the Margin Settings around many blocks. Margin is the space around the outside of a block, outside of the border.