Transcript
Introduction
In this lesson, we will focus on dimension settings, namely padding, margin, and block spacing. One of the key features of the Block Editor is the ability to customize the dimensions of your blocks. These tools are crucial for creating visually appealing and well-structured layouts.
Accessing settings
To access the dimension settings, select the relevant block, click on Settings, at the top right, and then select Styles. And below dimensions, you will be able to tweak padding, margin, and block spacing. If some of the dimension settings are not visible, for example, padding and margin in this case, click on the three vertical dots and then enable padding and margin.
Definition
As a reminder, padding is the space inside a block between its content and border. Margin is the space outside the block, separating it from other sections or elements. And then thirdly, block spacing controls the gap between nested blocks within a container block, like columns or groups.
Padding
Let’s start with padding. Below padding, you will see a slider or visual representation of the block with padding controls. You can set the padding for the horizontal and vertical sides separately by dragging the slider from 0 to XXL. You can also set a custom size by entering a custom value. You can use different units like pixels, percentages, or relative units. Click on Unlink sides to adjust padding for each side individually. That means you can disconnect the dimensions and update the padding for top, left, bottom and right separately. In the following example, I will select the Group block, make my way to Styles, and scroll down to Dimensions. Then I will use the horizontal slider and drag it to an extra large size to add more spacing at the top and the bottom of my Group block. Then, I will select my left Buttons block or call to action, open padding, and then add custom values to create more space around the text in my Buttons block.
Margin
Next up is margin. You will notice it works exactly the same way as padding. You can use the slider to add space above or below the block. Or you can set a custom size. You can even set negative margins, but this is an advanced setting. When you click on the Unlink sides, you can set horizontal and vertical margins separately. In the first example, I will select the Buttons block and then add some top margin. To create some breathing room for the content within the container block. In the following example I am editing a template and I am adding top margin above the content area to create space between my header and the content on the page.
Block spacing
Next, let’s explore block spacing. As mentioned, block spacing is used to create space between nested blocks within a container block. For example if you set a wider block spacing on a Group block or a Columns block, blocks inside are spaced apart accordingly. In this example, I will set the vertical block spacing to 0 as I want to unite all the images in my Gallery block. In the last example I am going to add some horizontal block spacing between two elements within a Group block.
Style Book
Remember you can set default padding, margin and block spacing values for different block types in the Style Book. For example, we can then go to Media, and select the Media and Text block. Then, we may decide to add some vertical padding, which will, of course, be applied globally. And then if you add a new Media and Text block to a page or post that will be the default style. Or we can go to Design and then style the Buttons block globally as well by adding vertical and horizontal padding to the block. Furthermore you can also update the padding and block spacing for the main content area of your site below layout. Firstly, let’s add some vertical padding to our main content area, and then you also have the option to increase or decrease block spacing.
Conclusion
In conclusion, the Block Editor provides real-time visual feedback. So, experiment with different combinations of padding, margin, and block spacing. These powerful tools allow you to create various layouts without needing custom CSS.