Spacing before and after images

Hi there,

I assume this is the little space you are referring to?
https://www.screencast.com/t/62kEVu9r

That is default line-height property added to the <p> tag by the theme.

Not the easiest to deal with but a couple of options:
- Add the image without the <p> tag.

- Give the <p> tag a class like <p class="no-line-height"> then target with CSS:

p.no-line-height {
    line-height: 0;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Hey Leo, thanks for the quick response. I added in the CSS but I still notice there is slightly more space below the image than there is above.

Check out the first image on this page and let me know what you think... maybe I'm going crazy haha.

https://www.marineapproved.com/best-air-rifle-scopes-review/

Hmm that page has the exact same issue here:
https://generatepress.com/forums/topic/spacing-before-and-after-images/#post-907180

I'm not seeing either of the fix being applied.

Hi Leo,

What exactly do you mean by "Add the image without the <p> tag."?

Would giving the image a CSS class then targeting with CSS work? What would the code look like for that?

I'm just trying to find the simplest way to even out the spacing

Basically remove the <p> tag that's highlighted in this screenshot:
https://www.screencast.com/t/62kEVu9r

It might be added by default though I'm not sure if there is a way to remove that in Elementor editor.

If not then you will need to apply the second solution.

Definitely no easy way around this.

Ok no problem. How do I assign the <p> a class? wouldn't that affect all paragraphs?

You would only add the specific class to the <p> above the <img>.

I'm not sure how you would add it using Elementor.

Personally I would try to ignore that little space ;)

Haha ok thank you!

No problem :)