[Resolved] How to remove unwanted spacing under image

[Oisin]

Hi there,

I used Generate Blocks to rebuild my homepage but I’m now seeing a small bit of space at the bottom of my image. I’ve looked at it in DevTools but can’t figure out where it’s coming from. Any help much appreciated.

Oisin.

[David]

Hi there,

Its the default image alignment, add this CSS which will be included in the GenerateBlocks release candidate:

.gb-inside-container .wp-block-image img {
    vertical-align: bottom;
}

[Oisin]

Hi David,

For some reason this no longer works. Have you any idea why that might be?

Thanks,

Oisín.

[Elvin]

Hi,

Alternative to CSS code, you can try setting the vertical alignment of the right column to Bottom: – https://docs.generateblocks.com/article/grid-overview/#editing-our-grid-block

I’ve checked your image block and seems to be set to align right. By default, Gutenberg’s alignright class also add margin top and bottom which can also cause the gap you see.

To remove this, you can either remove the image block’s alignment setting or set it to align center.

or keep the settings and add this css code.

.wp-block-image .alignright {
margin: .5em 0 0 1em;
}

Let us know if this works for you.

[Elvin]

or keep the settings and add this css code.

.wp-block-image .alignright {
margin: .5em 0 0 1em;
}

Note: this will apply all wp-block-image w/ alignright class. If that isn’t preferred, you may want to add Additional CSS class(es) on image block’s advanced settings and use for css styling.

It may look something like this:

and CSS code:

.no-margin-bottom {
margin-bottom: 0 !important;
}

[Oisin]

Hi Elvin,

I tried:

.no-margin-bottom {
margin-bottom: 0 !important;
}

but it didn’t work for some reason? I definitely need the image right align so just need it to sit neatly on the line and everything will be fine.

Any other reason why this is not working?

Thanks,

Oisín

[David]

For Elvins CSS do this:

.no-margin-bottom figure {
    margin-bottom: 0 !important;
}

[Oisin]

That worked perfect, thanks David. Why figure instead of img?

[Elvin]

Thanks David! 🙂

That worked perfect, thanks David. Why figure instead of img?

Because <img> is just a child of the <figure> tag, which is the one who has the unwanted margin that’s causing the gap.:)

It’s basically structured this way in the DOM:

div.no-margin-bottom (css class we added) > figure.alignright (causing the gap) > img (the actual image)

Good to know that it works for you now. Cheers. 🙂

[roadlink]

I have added this code to additional css.

.no-margin-bottom figure {
    margin-bottom: 0 !important;
}

then added Additional CSS class(es) on image block’s advanced settings and use for css styling.
As no-margin-bottom it didn’t work.
Also tried to add no-margin-bottom figure still no.

[Leo]

Please stick with your own topic here:
https://generatepress.com/forums/topic/remove-gap-between-2-images-added-by-gutenberg/#post-1905806

Thanks!

[Author]

Posts