html - 删除空白元素的填充

我正在为即将到来的门户网站生成页面，并且我有一个带有一些可选内容的HTML元素。我希望如果元素为空，则不渲染，但向其添加一些填充会使其渲染。如何为内容添加填充，但前提是存在内容？

.someElement{padding-top: 5px;}

有问题的HTML:

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

基本上，我希望上面的第二个元素不要占用任何空间。我正在使用XHTML 1.1 doctype在所有主要的浏览器中进行测试。

最佳答案

您可以使用CSS3伪类:empty来解决问题

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

遗憾的是，Internet Explorer还不支持该功能。对于所有其他浏览器，它将正常工作...