Title: Dimensions: Padding, margin and block spacing
Published: 29 November 2024
Last modified: 16 October 2025

---

[Home](https://learn.wordpress.org)[Courses](https://learn.wordpress.org/courses/)
[Beginner WordPress Designer](https://learn.wordpress.org/course/beginner-wordpress-designer/)
Dimensions: Padding, margin and block spacing

 [ Exit Course ](https://learn.wordpress.org/course/beginner-wordpress-designer/)

 1.   a.  [   WordPress showcase for designers  ](https://learn.wordpress.org/lesson/wordpress-showcase-for-designers/)
         [Preview](https://learn.wordpress.org/lesson/wordpress-showcase-for-designers/)
      b.  [   Using the Style Book as a design guide  ](https://learn.wordpress.org/lesson/using-the-style-book-as-a-design-guide/)
         [Preview](https://learn.wordpress.org/lesson/using-the-style-book-as-a-design-guide/)
      c.  [   Overview of WordPress block theme terms and hierarchy  ](https://learn.wordpress.org/lesson/overview-of-wordpress-block-theme-terms-and-hierarchy/)
         [Preview](https://learn.wordpress.org/lesson/overview-of-wordpress-block-theme-terms-and-hierarchy/)
      d.  [   Designing with a block-first mindset  ](https://learn.wordpress.org/lesson/designing-with-a-block-first-mindset/)
         [Preview](https://learn.wordpress.org/lesson/designing-with-a-block-first-mindset/)
 2.   4 lessons, 2 quizzes
 3.   a.  [   Finding a block theme for your design needs  ](https://learn.wordpress.org/lesson/finding-a-block-theme-for-your-design-needs/)
         [Preview](https://learn.wordpress.org/lesson/finding-a-block-theme-for-your-design-needs/)
      b.  [   Choosing and installing a plugin  ](https://learn.wordpress.org/lesson/choosing-and-installing-a-plugin-copy/)
         [Preview](https://learn.wordpress.org/lesson/choosing-and-installing-a-plugin-copy/)
      c.  [   Getting started with the WordPress dashboard  ](https://learn.wordpress.org/lesson/getting-started-with-the-wordpress-dashboard-copy/)
         [Preview](https://learn.wordpress.org/lesson/getting-started-with-the-wordpress-dashboard-copy/)
      d.  [   Understanding the difference between WordPress posts and pages  ](https://learn.wordpress.org/lesson/understanding-the-difference-between-wordpress-posts-and-pages-copy/)
         [Preview](https://learn.wordpress.org/lesson/understanding-the-difference-between-wordpress-posts-and-pages-copy/)
 4.   4 lessons, 1 quiz
 5.   a.  [   Why design in the Site Editor and use it for prototyping?  ](https://learn.wordpress.org/lesson/why-design-in-the-site-editor-and-use-it-for-prototyping/)
         [Preview](https://learn.wordpress.org/lesson/why-design-in-the-site-editor-and-use-it-for-prototyping/)
      b.  [   Web accessibility guidelines to create inclusive websites  ](https://learn.wordpress.org/lesson/web-accessibility-guidelines-to-create-inclusive-websites/)
         [Preview](https://learn.wordpress.org/lesson/web-accessibility-guidelines-to-create-inclusive-websites/)
      c.  [   Testing your content for accessibility  ](https://learn.wordpress.org/lesson/testing-your-content-for-accessibility-copy/)
         [Preview](https://learn.wordpress.org/lesson/testing-your-content-for-accessibility-copy/)
 6.   3 lessons, 2 quizzes
 7.   a.  [   Intro to the Site Editor  ](https://learn.wordpress.org/lesson/intro-to-the-site-editor-copy/)
         [Preview](https://learn.wordpress.org/lesson/intro-to-the-site-editor-copy/)
      b.  [   Differentiating between homepage display settings and various templates  ](https://learn.wordpress.org/lesson/differentiating-between-homepage-display-settings-and-various-templates-copy/)
         [Preview](https://learn.wordpress.org/lesson/differentiating-between-homepage-display-settings-and-various-templates-copy/)
      c.  [   Using page templates  ](https://learn.wordpress.org/lesson/using-page-templates-copy/)
         [Preview](https://learn.wordpress.org/lesson/using-page-templates-copy/)
      d.  [   Using template parts  ](https://learn.wordpress.org/lesson/using-template-parts-copy/)
         [Preview](https://learn.wordpress.org/lesson/using-template-parts-copy/)
      e.  [   Customizing theme settings: Colors, fonts, typography and layout  ](https://learn.wordpress.org/lesson/customizing-theme-settings-colors-fonts-typography-and-layout/)
         [Preview](https://learn.wordpress.org/lesson/customizing-theme-settings-colors-fonts-typography-and-layout/)
 8.   5 lessons, 3 quizzes
 9.   a.  [   Designing with the Group block  ](https://learn.wordpress.org/lesson/designing-with-the-group-block/)
         [Preview](https://learn.wordpress.org/lesson/designing-with-the-group-block/)
      b.  [   Designing with Row and Stack blocks  ](https://learn.wordpress.org/lesson/designing-with-row-and-stack-blocks-copy/)
         [Preview](https://learn.wordpress.org/lesson/designing-with-row-and-stack-blocks-copy/)
      c.  [   Designing with the Columns block  ](https://learn.wordpress.org/lesson/designing-with-the-columns-block-copy/)
         [Preview](https://learn.wordpress.org/lesson/designing-with-the-columns-block-copy/)
      d.  [   Dimensions: Padding, margin and block spacing  ](https://learn.wordpress.org/lesson/dimensions-padding-margin-and-block-spacing/)
         [Preview](https://learn.wordpress.org/lesson/dimensions-padding-margin-and-block-spacing/)
 10.  4 lessons, 2 quizzes
 11.  a.  [   Utilize the Gallery block  ](https://learn.wordpress.org/lesson/utilize-the-gallery-block/)
         [Preview](https://learn.wordpress.org/lesson/utilize-the-gallery-block/)
      b.  [   Using the WordPress Media and Text block  ](https://learn.wordpress.org/lesson/using-the-wordpress-media-and-text-block/)
         [Preview](https://learn.wordpress.org/lesson/using-the-wordpress-media-and-text-block/)
      c.  [   Uncovering the Cover block  ](https://learn.wordpress.org/lesson/uncovering-the-cover-block-copy/)
         [Preview](https://learn.wordpress.org/lesson/uncovering-the-cover-block-copy/)
      d.  [   Using a plugin to create a carousel slider  ](https://learn.wordpress.org/lesson/using-a-plugin-to-create-a-carousel-slider/)
         [Preview](https://learn.wordpress.org/lesson/using-a-plugin-to-create-a-carousel-slider/)
 12.  4 lessons

### Layout composition

# Dimensions: Padding, margin and block spacing

## 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.

## Practical

Use WordPress Playground and the Twenty Twenty-Five default theme to test your knowledge.

 * Add the pattern below to a page and update the block spacing of the Grid block
   to extra small.

**Original block spacing: Regular**

![Screenshot of Grid block with regular block spacing](https://i0.wp.com/learn.wordpress.
org/files/2024/11/Screenshot-2024-12-13-at-10.02.45%E2%80%AFAM-1.png?resize=3008%
2C1482&ssl=1)

**Updated block spacing: XS**

![Screenshot of Grid block with XS block spacing](https://i0.wp.com/learn.wordpress.
org/files/2024/11/Screenshot-2024-12-13-at-10.05.42%E2%80%AFAM.png?resize=3008%2C1482&
ssl=1)

 * Add the pattern below to a page and update the horizontal and vertical padding
   of the Columns block to XX-Large.

**Original padding: Zero**

![Screenshot of Columns block pattern.](https://i0.wp.com/learn.wordpress.org/files/
2024/11/Screenshot-2024-12-13-at-10.21.19%E2%80%AFAM.png?resize=3008%2C1422&ssl=
1)

**Updated padding: XX-Large**

![Screenshot of Columns block with XX-Large padding.](https://i0.wp.com/learn.wordpress.
org/files/2024/11/Screenshot-2024-12-13-at-10.28.46%E2%80%AFAM.png?resize=3008%2C1422&
ssl=1)

 * Add a Buttons block and type ‘Learn more.’
    - Change the horizontal padding to 10 pixels.
    - Change the vertical padding to 20 pixels.

![Screenshot of two Buttons blocks with different padding added.](https://i0.wp.
com/learn.wordpress.org/files/2024/11/Screenshot-2024-12-13-at-10.36.52%E2%80%AFAM.
png?resize=604%2C556&ssl=1)

 * Add the following Cover block twice.
    - Change the bottom margin of the first pattern to Regular.

![Screenshot of two Cover blocks with added bottom margin to the first Cover block.](
https://i0.wp.com/learn.wordpress.org/files/2024/11/Screenshot-2024-12-13-at-11.01.43%
E2%80%AFAM.png?resize=2174%2C1744&ssl=1)

 This is a preview lesson

Register or sign in to take this lesson.

 [ Take course ](https://learn.wordpress.org/course/beginner-wordpress-designer/)

 [ Sign in ](https://login.wordpress.org/?redirect_to=https%3A%2F%2Flearn.wordpress.org%2Flesson%2Fdimensions-padding-margin-and-block-spacing%2F&locale=en_US)

##  Suggestions

 Found a typo, grammar error or outdated screenshot? [Contact us](https://learn.wordpress.org/report-content-feedback/).