If you are using the WordPress Gutenberg editor to create pages on your website, you might have noticed that the Button block does not have many spacing options. By default, the Button block has a small margin around it, which might not be enough for some designs and will make it uncomfortable for users to enjoy the content on your website.
In this article, we will show you how to add more space after the Button block in Gutenberg by adding a simple custom CSS. This will allow you to create more breathing room for your buttons and make them stand out from the rest of the content.
Gutenberg has a built-in Spacer block to do that. However, there are some potential cons to using the Spacer block method in Gutenberg. Such as less precise control and being time-consuming.
For global modifications, the CSS technique can be more effective and offers more precise control over spacing.
Adding More Space After the Button Block in WordPress Gutenberg Editor
Okay, so to add more space after the Button block in Gutenberg, all you have to do is add the following simple CSS snippet to the Additional CSS block on Theme Customizer.
On your WordPress dashboard, go to Appearance -> Customizer -> Additional CSS. A little note. If you use a block theme, you need to enable the Theme Customizer first to easily add custom CSS.
Once you enter the Additional CSS block, please copy the simple CSS snippet below and paste it into the available field.
.wp-element-button{
margin-bottom:22px;
}
Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.
The Code Explanation:
- Targeting the Button Elements
.wp-element-button: This is a class name that targets all the Button block elements.
- Styling the Button Elements
margin-bottom:22px;: Adds a 22-pixel margin to the bottom of the button, creating more spacing with elements below the buttons.
You can also change the property’s value to adjust the spacing amount.
That’s it. To see how the CSS snippet you’ve added works, you can create a new post type or select the existing one (page or post) with the Button block and other blocks below the button, then preview your page in the new tab or window.
The Bottom Line
This article demonstrates how to add more space after the Button block in the WordPress Gutenberg editor by adding a simple custom CSS. The Spacer block method in Gutenberg has potential cons, such as less precise control and time-consuming. However, the CSS technique can be more effective and offers more precise control over spacing.
margin-bottom:22px;. This will target all Button block elements and add a 22-pixel margin to the bottom of the button, creating more spacing with elements below the buttons. You can adjust the property’s value to adjust the spacing amount.
