{"id":15242206,"date":"2022-01-17T21:59:29","date_gmt":"2022-01-17T21:59:29","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&p=15242206"},"modified":"2024-06-06T14:01:44","modified_gmt":"2024-06-06T14:01:44","slug":"dimension-controls-overview","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/dimension-controls-overview\/","title":{"rendered":"Dimension Settings overview"},"content":{"rendered":"\n

You can use the dimension settings in blocks<\/a> to help you better customize your layout and design. These settings impact the dimensions of blocks in various ways, including how groups of blocks are placed alongside one another.<\/p>\n\n\n\n

The dimension settings are available when you use the block editor<\/a>. If you are new to the block editor, this guide<\/a> will show you how to work with blocks. You can read more about the new block editor features and improvements in this article.<\/a><\/p>\n\n\n\n

How to access dimension settings<\/h2>\n\n\n\n

The dimension settings can be found in the Block Settings sidebar of a block<\/a> under the section Dimension<\/strong>. <\/p>\n\n\n\n

If you don\u2019t see the Block Settings<\/strong> sidebar, select the block you want to customize, then click the settings<\/strong> icon (a cog) that is to the right of the Publish<\/strong> or Update<\/strong> buttons in the WordPress Editor.<\/p>\n\n\n\n

Below are a few examples from different blocks:<\/p>\n\n\n\n

\n
\"Button<\/figure>\n\n\n\n
\"Paragraph<\/figure>\n\n\n\n
\"Cover<\/figure>\n
Each block has different dimensions settings <\/figcaption><\/figure>\n\n\n\n

In the\u00a0Dimension<\/strong>\u00a0section, click on the three-dot menu (also known as an ellipsis) to explore all the dimension settings that are not visible by default.<\/p>\n\n\n\n

If you make customizations to these settings and want to revert back to the original settings quickly, you can do so by selecting the three-dot menu icon and clicking Reset All<\/strong> as shown in this article<\/a>. This resets the settings and removes all of your changes. You can reset individual settings by clicking Reset<\/strong> on each setting. You can also reset all of them globally by clicking on the Reset All<\/strong> option.<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

Type of settings<\/h2>\n\n\n\n

Each block comes with different dimension settings. <\/p>\n\n\n\n

Padding<\/h3>\n\n\n\n

This setting impacts the space between a block’s content and its border. You can either set horizontal and vertical paddings or set different padding values for each side. To set different padding for each side, follow the steps in the Unlink sides<\/a><\/strong> section.<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

Margin<\/h3>\n\n\n\n

This setting impacts the space <\/strong>around a block. You can either set horizontal and vertical margins or set different margin values for each side. To set different margins for each side, follow the steps in the Unlink sides<\/a><\/strong> section.<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

Preview margin and padding<\/strong><\/p>\n\n\n\n

When changing the margin or padding in a block, the editor will show the corresponding change, highlighted in a blue box around the block.<\/p>\n\n\n\n

Block spacing<\/h3>\n\n\n\n

This setting impacts the space between nested blocks. This means that if you set block spacing for the entire block, you can change the spacing of the nested block within the parent block. You can find this setting in blocks like the Buttons block<\/a> or Group block<\/a>. <\/p>\n\n\n\n

Within this setting, you can choose to set block spacing using different values: px, %, em, rem, vw, vh<\/a>. <\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

Minimum height<\/h3>\n\n\n\n

This setting enables you to set a minimum height for the block. You can find this option in the Cover block<\/a>, Post Content block<\/a>, Group block<\/a> (including the Row<\/a> and Stack<\/a> variations). Within this setting, you can choose to set the height using different values: px, %, em, rem, vw, vh<\/a>.<\/p>\n\n\n\n

An example use case is to ensure that a Post Content area has a minimum height, forcing a footer area to render lower on the page, even if a page has very little content. Because of this, it can be quite useful to use viewport relative units when setting minimum height, e.g. 100vh<\/code> for a block that takes up the entire height of the viewport.<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n