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!

closed as off-topic by Nathan Johnson, EAMann Mar 3 '18 at 0:25

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • 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? – Jacob Peattie Feb 15 '18 at 14:23
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

  • Oh wow I had no idea u could add that empty condition in CSS... what is that extra value called? – Patrick Feb 15 '18 at 14:19
  • Is it cross browser compatible? – Patrick Feb 15 '18 at 14:20
  • Those are called Pseudo-class w3schools.com/css/css_pseudo_elements.asp – Wilco Feb 15 '18 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 '18 at 14:21
  • 1
    @Wilco It's a pseudo-class. Pseudo-elements are specifically :before and :after which create (pseudo) elements in the DOM. – Jacob Peattie Feb 15 '18 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.