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.
In this guide
When you click on a block, you will find the block settings in the right sidebar. If you do not see the sidebar, you may need to click the Settings icon in the top-right corner to bring up the settings. This icon looks like a square with two uneven columns:
Within the block settings, you may find the dimensions settings right away. Other blocks have their dimensions settings located under the Styles tab. The image on the right shows a block with the dimensions settings underneath the Styles tab, accessible by clicking the circular icon.
Note that not every block includes dimensions settings. The available settings will vary depending on the theme and the type of block.
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 of 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:
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.
When using Dimensions settings, you can choose from the following units:
- Pixels – maintain a consistent size regardless of the screen size.
- % – choose a percentage relative to the parent HTML element.
em– use a responsive size that adjusts to the viewer’s screen size, relative to the parent HTML element.rem– use a responsive size that adjusts to the viewer’s screen size, relative to the root HTML element.vw– set the size relative to the width of the viewer’s screen.vh– set the size relative to the height of the viewer’s screen.
