How to Remove Blank Spaces Between Blocks in the Twenty Twenty Theme

What many people ask at the forums, about the Twenty Twenty Theme, is how to remove the “blank spaces.” There’s isn’t one straight solution to do it, but there is one simple answer 😉.

In this post I’m going to explain to you what happens in this theme, give you an example and a “huge alert”.

Index

1. Blank Spaces and the Box Model
2. An Example with the Twenty Twenty Theme
   • Fixing the Padding: Two Options
   • All in One
3. Huge Alert: What You Need to Know Above All
4. Conclusion

Blank Spaces and the Box Model

What code newbies call “blank spaces”, are in fact the margin, padding or border that the theme has applied in its style sheet to its elements, even to the blocks you’ll add in the editor.

To understand this, we are to be familiar with four things:

1. The Box Model
2. The Developer Tools
3. The theme’s layout and its elements’ properties
4. How do Blocks behave (what’s been declared in the theme’s stylesheet)

The Box Model shows us the size, padding, border and margin of an element, like this (with these colors)…

… and this is something you can discover with the Developer Tools.

Now, regarding the theme, you’ll discover those properties in:

• the theme’s layout (header, main area – and what’s inside-, nav and widget area, and the footer)
• the blocks added in the editor

Finding out how to reduce the padding, border or margin of the theme’s layout, is as easy as right clicking over the element to open the developer tools, see the values and change them. Doing the same with the blocks, is not as simple.

The big issue that you’ll encounter in this theme, is the following: when you add a setting to a block (for instance, you’ve chosen to display it at wide or full width, or you’ve added a background color) those properties (margins and/or padding) change.

When you add certain blocks below others, or change their default settings, the values of the box model change.

An Example of Blank Spaces in the Twenty Twenty Theme

For this example I added a Cover Block and a Group Block below. By default, both of these blocks have the top and bottom margins set at 8rem; and it looks good:

But, if you add to the “Group Block” (the second one) a background color, its padding will expand and the margin bottom of the “Cover Block” (the first one) will appear:

You can fix this simply by adding to your CSS stylesheet the following:

.wp-block-cover {
	margin-bottom:0!important;
}

However, if you publish it like that, the padding of the “Group Block” is going to end up looking thicker than in the CSS preview:

Fixing the Padding: Two Options

If you want it thinner, the first option is to simply add the following:

.wp-block-group {
	padding-top:2rem!important;
	padding-bottom:2rem!important;
}

The second option (which I use and recommend) is to add in “Advance / Additional CSS class(es)” a class to the “Group Block”; my go-to class is thinner-group (remember, without the dot)

Then, what’s left is to give that class a smaller padding (in your CSS stylesheet or customizer, of course); simply, like this:

.thinner-group {
	padding-top:2rem!important;
	padding-bottom:2rem!important;
}

This way, every time you create a “Group Block” you can choose wether to add to it that class or not, to make it thinner or not.

All in One

If you choose to add the “thinner-group” class, to get to this final result…

… the final CSS snippets will be:

.wp-block-cover {
	margin-bottom:0!important;
}

.thinner-group {
	padding-top:2rem!important;
	padding-bottom:2rem!important;
}

Huge Alert: What You Need To Know Above All

By using the important rule, you’ll make all the blocks used in the example to look the same way, always: all across your blog.

This is why I recommend using the “Advanced CSS” option, so that you’ll have control over which blocks (in certain post or page) will behave the way you want to.

However, what you really need to know, is what has been declared in the theme’s style sheet. For instance, for a group block without an extra setting:

.wp-block-group:not(.has-background):not(.alignwide):not(.alignfull) {}

• at line 2902 (for mobile devices) you’ll see it will have a margin of 3rem;
• at line 5231 (for min-width:700px) a margin of 4rem.

So, the same block, will behave differently according the size of the screen. Hence, you’ll need to customize the same selector more than once.

Conclusion

As I said at the beginning, there isn’t one straight solution, but one simple answer: study the theme with the help of the Developer Tools, which will tell you even what line of the style sheet you need to check.

And, at the time of customizing your theme, you’ll need to use the selectors used by the theme in the way declared in the stylesheet; that is: write down your selectors and new values under each of the media queries necessary.

It’s a long job… But this is how it’s done.