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

I came across a question on the Twenty Twenty Theme Forum, about the blank space that show up among blocks, and since this question appears several times, I thought it would be nice to leave the answer here.

Removing the Blank Space (Fixing Margins)

For this example I added a Cover Block and a Group Block. 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, 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;
}

And that’s a wrap!

subscribe