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.
To access the dimension settings, select the relevant block, click on Settings, 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.
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.
Let's start with padding.
Below padding you will see a slider or visual representation of the block with padding controls.
And you can set the padding for horizontal and vertical sides separately by dragging the slider from 0 to XXL.
Or you can set a custom size by entering a custom value.
You can use different units like pixels, percentages or relative units.
And 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 extra large 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.
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.
And when you click on 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 next 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.
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 am going to set the vertical block spacing to 0 as I want to unite all the images in my Gallery block.
And in the last example I am going to add some horizontal block spacing between two elements within a Group block.
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, select the Media and Text block.
And 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.
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 a variety of layouts without needing custom CSS.