[Resolved] Random margin-bottom being added to entry-content

[DAVID]

hi –

I have a white space being added to the end of blocks and it seems to be added by the customiser.

The bit of css that creates the white space is I think margin-bottom on this:

.entry-content > [class*=”wp-block-“]:not(:last-child) {
* 
 margin-bottom: 1.5em;
}

But I can’t find out where that is being added. I am trying to butt the blocks up against each other with no added space. I thought it might be the option for separating space or content separator but neither is set to 1.5em and adjusting them doesn’t seem to make any difference.

Here’s the HTML that is being produced. This is built in Gutenberg.

<div class="wp-block-group alignfull has-background" style="background-color:#f8f2e5"><div class="wp-block-group__inner-container">
<div class="wp-block-columns are-vertically-aligned-center has-background" style="background-color:#f8f2e5">
<div class="wp-block-column is-vertically-aligned-center">
<h2>Launching this Autumn with a whizz and a bang</h2>
<p>Delivering the finest drinks from regional producers</p>
<div class="wp-block-buttons">
<div class="wp-block-button"><a class="wp-block-button__link has-white-color has-text-color has-background" href="https://xxxx" style="border-radius:2px;background-color:#906d51">Sign up for our newsletter now</a></div>
</div>
</div>
<div class="wp-block-column is-vertically-aligned-center">
<figure class="wp-block-image size-large"><img loading="lazy" width="967" height="450" src="xxxx.png" alt="Autumn illustration" class="wp-image-330" srcset="xxx.png 300w, xxxx.png 768w, xxx.png 150w, xxxx.png 600w, xxxx.png 64w" sizes="(max-width: 967px) 100vw, 967px"></figure>
</div>
</div>
</div>
</div>

Hoping you can help. Thanks!

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[DAVID]

replied privately

[Leo]

Try this CSS:

.entry-content > [class*="wp-block-"]:not(:last-child) {
    margin-bottom: 0;
}

[DAVID]

Thanks. That fixed it. Is that a bug or a feature?

[Leo]

That’s just a CSS we added to make sure that there is separating space between each WP block.

[DAVID]

Probably cool to make that an option in the customiser then? Anyway, thanks for your help.

[Leo]

I would recommend using GenerateBlocks to create the layout you are after:
https://generateblocks.com/

It would give you full control of the margins/paddings between each block 🙂

[Author]

Posts