[Resolved] Margin for images with and without captions in posts

[Paul]

Hi There,

I added the following CSS to add some margin below an image with a caption in a post:

/*Blog post content image caption styling */
.wp-block-image figcaption {
    margin-top: 0.5em;
    margin-bottom: 2.5em;
}

Which works fine BUT if the image has no caption, there is no margin so I added this:

/*Blog post content image styling */
.blog-post-content-wrapper img {
	 border-radius: 1rem; margin-top: 0.5em;
    margin-bottom: 2.5em;
}

Which works for images without caption but if image has caption this adds margin above caption – not what I wanted 🙂

Can you help (I did a search on past topics but couldn’t find anything on this)

Example post URL with images in private info

Cheers

[Ying]

Hi there,

Remove the margin-bottom from both of your CSS, and add it to the image block itself which is this selector .wp-block-image

[Paul]

Hi Ying,

Thanks for that – I updated to this:

/*Blog post content image styling */
.blog-post-content-wrapper img {
	 border-radius: 1rem;       	margin-top: 0.5em;
}

/*Blog post content image caption styling */
.wp-block-image figcaption {
    margin-top: 0.5em;
}

/*Blog post content image styling */
.wp-block-image {
    margin-bottom: 2.5em;
}

But not seeing any changes to the margin-bottom?

Thanks
Paul

[Ying]

It seems GB adds a default bottom margin 0 to the image block, can you add !important to the CSS?

.wp-block-image {
    margin-bottom: 2.5em !important;
}

[Paul]

Perfect thank you Ying!

[Ying]

No problem 🙂

[Author]

Posts