Padding Versus Margin

Various dimension controls are built into different blocks to help you achieve greater customization for your layout and design, especially when combined.

Padding and margin are two important properties, and they essentially do the same thing – they create extra space. But the question is, where?

In this session, we will explore how to use these controls more confidently.

Learning outcomes

1. Locating and using the padding and margin sliders
2. Setting a custom size
3. Unliking sides and configuring the value of sides separately
4. Resetting dimension settings

Comprehension questions

1. How can padding and margin help you to improve the design of your site?
2. Are padding and margin available in Global Styles?

Transcript

Welcome to Learn WordPress. Join me as we explore the difference between padding and margin. Padding and margin are two important properties, and they essentially do the same thing. They create extra space. But the question is, where?

Well, padding is what creates space inside a block, and margin is what creates space around a block. Hopefully, this visual depiction will make it more clear. The margin adds space around the border of a block or element, and padding creates space inside the block or element’s boundary. Various dimension controls are built into different blocks to help you achieve greater customization for your layout and design, especially when combined, and padding and margin are two of these controls that we are talking about today.

You can find the dimension controls in the block settings sidebar under the label Dimensions. Once you are able to see the dimension section, you can click on the three vertical dots and select Margin. You will notice you also have the option to opt-in for Block Spacing. So these are additional dimension controls that you can explore. Some blocks have margin as optional, but some might only allow you to change the padding. Please note a lot of work is being done to add additional controls to more blocks to provide extra flexibility.

So let’s first look at padding settings. As mentioned, this setting impacts the space between a block’s content and its border. You can set the padding for all sides by using the slider in your sidebar settings from zero to double XL. Or you can set a custom size by dragging up and down below padding or using the available slider. When you click on Unlink sides, you have the option to configure the value of each side separately. You will notice now you can change the top or only the right or the bottom or only the left. And when you click on the three vertical dots, you have the option to reset all.

Now, let’s take a closer look at margin. The margin setting impacts the space around a block. Very important, margin is usually used to add gaps between elements on a page. So, for example, you can use the margin setting to add a gap between the Group block and the Heading block in this example. As mentioned previously, to change the margin setting, we have to click on the three vertical dots and select Margin. And to change the margin consistently, we also have the slider option from zero to double XL or we can set a custom size.

One difference you will notice when we change the margin setting is that we are only changing the top and the bottom. When you click on Unlink sides, you once again have the option to configure separate values for the top and bottom margin. Let’s use the slider options again for the top, for the bottom and then if we click on the three vertical dots, we can reset it again. Just one thing to note. When you change the margin settings for a heading or a paragraph, you will be able to change the margin for the top, the left, the bottom and the right.

Let’s finish off by looking at a few examples where we change the padding and the margin to improve the design. In our first example, we are going to change the padding to enlarge the space around the text in our Buttons block. And to do that, we can, of course, use the slider in our sidebar settings, but in this case, I’m going to change the values separately and set a custom size for each.

Firstly, I will change the unit of measurement to pixels and change the vertical value to 10 pixels and the horizontal value to 35 pixels, and there you go. Before we look at our second example, it is worth mentioning that when you add a block, default styling is applied in the Block Editor. But you can, of course, change this by altering the dimension settings. I’ve added two Columns blocks to this page. Firstly, I’m going to add more space around the text and image in the top Columns block by altering the padding settings. So I’ll make sure I select the parent block and then open up my sidebar settings, then I will click on set custom size and change the padding to 60 pixels.

Next, I’m going to add some more space between the two Columns blocks. So I’ll click on the three vertical dots, select margin and this time around, I’m going to use the slider and change the margin to extra large. In the last example, I’ve added a Cover block with some information, and I’m going to change the padding as the text is too far to the left. So to do that, I’m going to select the parent block, the Cover block, and then open the sidebar settings and drag the slider all the way to the right, 100 pixels, and now the information is much better positioned.

I trust you will now be able to use these settings more confidently, and visit Learn WordPress for more tutorials and training material.