Categories
Coding

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

Get rid of the white spaces between your blocks and make them look thinner, with nothing but two small CSS snippets, 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 πŸ˜‰

Processing…
Success! You're on the list.

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!

πŸ€—


Note

What I don’t know, is why that snippet doesn’t work when we don’t add more features to the second block.

Follow Laly on WordPress.com

3 replies on “How to Remove Blank Spaces Between Blocks in the Twenty Twenty Theme”

Hey! Thank you!
I was going through your blog trying to see where are you from because I’m writing coronavirus chronicles too πŸ˜€ (and I really enjoy your writing!)
Anyway, welcome!

Any thoughts?