Spacing before and after images

[Kevin Wabiszewski]

Hello, I’m not sure if this issue is associated to Generate Press or not, but would you happen to know why there is more space below images on the page than there is on the top?

You can look at the top image on the page linked below to see what I’m talking about.

I’ve spent an hour trying to figure out why the spacing is different but can’t seem to find a solution.

[Leo]

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/

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

[Kevin Wabiszewski]

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/

[Leo]

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.

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

[Kevin Wabiszewski]

Hi Leo,

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

[Kevin Wabiszewski]

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

[Leo]

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.

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

[Kevin Wabiszewski]

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

[Leo]

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 😉

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

[Kevin Wabiszewski]

Haha ok thank you!

[Leo]

No problem 🙂

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

[Author]

Posts