[Resolved] Remove space between one line of text and a specific image using WP block editor

[Trish]

Hi,

The image is labeled as wp-image-2853 and I tried to remove the space between one line of text and the image by adding the following code to the Additional CSS text box found under Appearance > Customize… but it didn’t work.

.wp-image-2853
{
    margin-top: 0!important;
}

Would like to have this work across the entire website where this image is used repeatedly.

Can you please help me?

Thank you in advance,
Trish

[Fernando]

Hi Trish,

The margin is in the <figure> tag. You can try adding a class to the Image, and then use that class instead to target the figure.

[Trish]

Hi Fernando,

But… I’ve understood that the figure tag is for ALL images and I only want one specific image targeted like this. By adding a class to the image’s “figure”, would that not cause ALL images to remove the space?

[Ying]

By adding a class to the image’s “figure”, would that not cause ALL images to remove the space?

Correct. If you add a class to the image block, and your CSS is using that class, then you will only target this specific image block.

[Trish]

Hey Ying,

But… then I’d need to add that class to EVERY post that image appears on… right?

[Ying]

Are those images the same file?

If so, you can target the image title, using something like this:

img[title="the-title"] {
     your CSS here;
}

[Trish]

Hi Ying,

If you mean the title as is shown in the Media Library… I tried that… even cleared the cache, but that too did not work. 🙁

Thank you for trying.

[Ying]

It seems WP image block doesn’t include the title attribute to the image and the margin top is added to the figure tag.

Maybe try this, instead of setting the figure’s margin-top to 0, we set the image’s margin-top to a negative value to do an offset.

img[alt="photo of Trish with her name below that"] {
    margin-top: -0.5em !important;
}

[Trish]

Still no difference… 🙁

[Fernando]

I can see it working from my end. Can you try changing the value? Something like:

img[alt="photo of Trish with her name below that"] {
    margin-top: -1.5em !important;
}

[Trish]

BIG HUGS for you Fernando, you did it!
THANK YOU!!!!!!!!!!!!!!!!!!!!

[Fernando]

You’re welcome Trish! Have a nice day!

[Author]

Posts