删除空元素的填充 [英] Remove padding for an empty element

问题描述

我正在为即将到来的门户网站生成一个页面，并且我有一个包含一些可选内容的HTML元素。我想要元素不呈现，如果它是空的，但添加一些填充，它导致它呈现。如何在内容中添加填充内容，但仅在内容存在时才会添加？

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有问题：

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

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

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.

推荐答案

你可以使用CSS3 pesudo- ：空

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

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

可悲的是Internet Explorer还不支持这个功能。对于所有其他浏览器，它应该做的只是... ...

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

这篇关于删除空元素的填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！