Block Spacing

Blocks can be styled in many different ways. They can have different backgrounds, borders, padding, margin, text alignments, and of course, spacing. Learn how to remove or add blank space between your blocks.

Learning outcomes

1. Locating the block spacing settings below Dimensions
2. Using the block spacing slider and setting custom spacing sizes
3. Unlinking sides
4. Grouping blocks to activate block spacing features
5. Resetting block spacing

Comprehension questions

1. How can you remove space between individual blocks?
2. Do you have separate control over the vertical and horizontal spacing between blocks in a grid?

Transcript

Good day and welcome to Learn WordPress. In this brief tutorial, we are going to take a closer look at block spacing. It allows you to add or remove space between nested blocks.

Block spacing is one of the controls you will find under the label Dimensions when you open up settings. The first option you have is to use the slider below block spacing to change the vertical and horizontal space between blocks simultaneously, and as you will notice, you can merely drag from left to right and right to left.

The next option is to set a custom size. Within the setting, you can set block spacing using different values. So I’ll go ahead and change it to pixels, and now I can add my own custom value, let’s say 10 pixels, or you can use the slider on the right. Lastly, you also have the option to unlink sides. This will allow you to set the vertical and horizontal spacing separately and if you click on the three vertical dots, you also have the option to reset all.

In the next example, I want to change the block spacing of the Columns block, so once I select the parent block, I will make my way down to Dimensions. But now we will notice there’s no block spacing. If you click on the three vertical dots, you will be able to explore any additional dimension controls not currently listed, and now we can merely select Block spacing. And once selected, I will go ahead and set a custom value of zero pixels to bring all the blocks together. Or we can change it to, let’s say, for example, 50 pixels.

If you have two blocks with a space in between that you would like to get rid of, you can merely select both of the blocks in your list view and then group them together. And once they are grouped together in a container block, you will be able to change the block spacing. I will go ahead and change the block spacing to zero, and now the two cover blocks are merged and create this really cool parallax effect.

In the last example, we are going to look at the Buttons block. Firstly, ensure that you select the parent block, as I have two button blocks, in the list view and then open up settings. And now, below block spacing, we can use the slider to enlarge the space or to make it smaller, or you can even drag up and down below block spacing. Another option you have is to change the orientation of your blocks to vertical, and now we can do exactly the same. And that’s it.

Visit Learn WordPress for more tutorials and training material.