Archived topic

Margin for images with and without captions in posts

5 replies · Started by Paul on November 30, 2022

Viewing posts 1–6 of 6

November 30, 2022 at 9:08 am #2443202

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

November 30, 2022 at 12:06 pm #2443434

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

November 30, 2022 at 1:52 pm #2443554

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

November 30, 2022 at 5:06 pm #2443729

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;
}

December 1, 2022 at 1:36 pm #2445580

Perfect thank you Ying!

December 3, 2022 at 12:43 pm #2448351

No problem :)

This archived topic is closed to new replies.

Start building better websites today.