0

I have noticed Wordpress loves to insert <p> tags everywhere. This can be both helpful and completely annoying...

The issue is sometimes i will catch empty <p> tags inserted into the html, which cause a spacing issue (creating more white space on the page..)

Instead of disabling the <p> tag styles all together. I would like to set the height of all <p> tags to 0px if the <p> tag is empty (has no text inside).

Can i do this without jquery or javascript? PHP maybe?

If jquery is the only option, you may post this as the answer.

Thanks for any help!

1
  • Actually empty <p> tags won't have a height, and if you use margins for spacing paragraphs then they will collapse and not take up any space. The only time WordPress should be creating 'empty' tags, but with a space, is if you add extra lines in the editor which presumably means you intended them. When are you running into this issue? Feb 15, 2018 at 14:23

2 Answers 2

3

I always like to use this in my css:

p:empty{

    height: 0;

    // or 
    display: none;
}

Keep in mind that this only removes absolutely empty paragraph tags. If there is a space or anything it will not be targeted. More about the empty selector here

6
  • Oh wow I had no idea u could add that empty condition in CSS... what is that extra value called?
    – Patrick
    Feb 15, 2018 at 14:19
  • Is it cross browser compatible?
    – Patrick
    Feb 15, 2018 at 14:20
  • Those are called Pseudo-class w3schools.com/css/css_pseudo_elements.asp
    – Wilco
    Feb 15, 2018 at 14:20
  • Yes it is cross browser compatible. I added a link on the bottom of my answer where you can see the browser compatibility as well as any explanation
    – Wilco
    Feb 15, 2018 at 14:21
  • 1
    @Wilco It's a pseudo-class. Pseudo-elements are specifically :before and :after which create (pseudo) elements in the DOM. Feb 15, 2018 at 14:24
0

What you want to do is instruct the browser to either shrink the height of the element, or merely hide it if there's no content. This can be done with the CSS :empty pseudoelement:

p:empty {
    height: 0;
}

Or

p:empty {
    display: none;
}

Be careful that your other CSS rules don't interfere with or otherwise override this.

Not the answer you're looking for? Browse other questions tagged or ask your own question.