Remove padding for an empty element

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...

Give the element an id attribute. You can then use Javascript to check it's innerHTML property once the page has loaded. If innerHTML has a length of zero, then you can set it's display property to none. This page might help if you don't know your javascript.

This is still a mucky way to play. If you know the element shouldn't be rendered before you serve the page it would be better to omit it altogether. If you don't want to omit the element, just hide it, then force it into hiding; style="display: none"

<style>
.someElement{padding-top: 5px; display:table;}
</style>
<div class="someElement">With padded content</div>
<div class="someElement"><!-- shouldn't render since it has no content --></div>

Adding display:table; should do the trick.

Give the empty element a different class (say someHiddenElement) when you are generating the content. Then add someHiddenElement { display: none } to your style sheet.

If it's necessary to have the div.someElement in the HTML, the best CSS/HTML way to do that would be to add an extra div around the added content that has the padding property

.someElement > div{padding-top:5px;}

<div class="someElement"><div>Content</div></div>

Otherwise, do as Pekka says, or take a look at having javascript do it for you.