Many blocks in the WordPress editor contain dimension settings to control the appearance of your content. This guide will show you how to use these settings.
Dimensions like block padding, margins, and spacing can be applied to the whole site, specific elements on your site, or to a single block of content.
To edit the style settings for your whole site, follow these steps:
- Visit your site’s dashboard.
- Go to Appearance → Editor.
- Select “Styles” from the left-side menu.
Learn more about editing your site’s styles.
To change the style settings for a single block, follow these steps:
- Visit your site’s dashboard.
- Navigate to the page, post, or template you want to edit.
- Select the block you want to apply the style.
- Locate the block settings sidebar.
In most cases, the style settings will be in the main block settings sidebar. Occasionally, you will see a separate tab for styles, represented by a black and white circle.
If you don’t see a particular setting, click the … or + icon to the right of Dimensions (as shown on the right.) You can then choose the option you want to access:
- Padding
- Margin
- Block spacing
- Minimum height
Note that not every block includes all these settings. The available dimensions settings will vary depending on the theme and the type of block.
Click each setting once, and a checkmark will appear next to it. You can then close the three dots menu to view the setting.
The Padding setting affects the space around the block’s content, inside its borders.
The Margin setting affects the space outside the block’s borders.
Use the slider to increase or decrease the padding or margin around the block. For more granular control, you can set a specific value by clicking the slider icon as shown here (you can also choose the units used).
You can set different padding and margin values for the top, right, bottom, and left sides of the block. Click the unlink sides icon, represented by a chain link with a line through it, as shown here:
The margin field supports negative values with a - symbol.
Use block spacing to adjust the distance between any two blocks within blocks like columns, group, row, and stack. You can customize block spacing as described below:
- Click the dotted lines to increase or decrease the spacing between your block items.
- Click on the settings icon to set a custom value for your block spacing and choose the units used.
- Click on the unlink sides icon to unlink your block spacing settings, so you can set different values for each side of the block.
Set a minimum height on blocks like cover, group, rows, and the Content block. This ensures the content will show in the maximum height you set, regardless of the viewer’s screen size.
You can reset the customizations on the dimensions for the block and start over. To reset the styles:
- Click the Dimensions options (the three vertical dots to the right of the section header.)
- Uncheck an individual setting to reset the specific setting, or click “Reset all” to reset all the settings.
If there is no option to reset, there are no customizations to remove.
When using Dimensions settings, you can choose from the following units:
- Pixels (px): maintains a consistent size regardless of screen size.
- em: scales relative to the parent element for responsive sizing.
- rem: scales relative to the root element for responsive sizing.
- vw: sets the size as a percentage of the viewport width.
- vh: sets the size as a percentage of the viewport height.