Remove blank paragraphs from WordPress Content with CSS

Here’s a quick and easy little fix to a common problem. The WordPress Content Editor, while great, tends to add <p> tags where you don’t want them to be. For instance, if I wanted to add an HTML comment (like <!–Start event div–>) WordPress is going to wrap that comment in a paragraph tag, which can mess with your layout. There are ways to run filters on the the_content() function, but for a quick and painless way to do it that doesn’t require PHP, simply add this CSS pseudo-class to your style.css file:

p:empty { display: none }

This simply looks for any <p> tag that has no content in it, and sets its display to none. Of course, this may not work for every occasion, but for most uses it ought to do.

Note: Naturally, for Internet Explorer, this only works with version 9 and above. It works with all major browsers (Firefox, Safari, Chrome, Opera) otherwise.

For more on the :empty pseudo-class, click here

~Karl