Remove padding for an empty element

Question

I'm generating a page for an upcoming portal site, and I've got an HTML element with some optional content. I'd like the element to not render if it is empty, but adding some padding to it causes it to render. How do I add padding to the content, but only if content is present?

.someElement{padding-top: 5px;} 

HTML in question:

<div class="someElement">With padded content</div> <div class="someElement"><!-- shouldn't render since it has no content --></div> 

Basically, I'd like the second element, above, to not take up any space. I'm testing in all major browsers, using XHTML 1.1 doctype.

Answer 1

You can do the trick with the CSS3 pseudo-class :empty

.someElement {     // your standard style } .someElement:empty {     display:none; } 

Sadly Internet explorer doesn't support that feauture yet. For all the other browsers it shall do just fine...