Question

我正在为即将推出的门户网站生成一个页面，我有一个带有一些可选内容的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在所有主流浏览器中进行测试。

Answer 1

您可以使用CSS3伪类：空白

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

可悲的是，Internet Explorer并不支持这种特性。对于所有其他浏览器，它应该做得很好......

Answer 2

为元素指定id属性。然后，您可以在页面加载后使用Javascript检查它的innerHTML属性。如果innerHTML的长度为零，则可以将其display属性设置为none。如果您不了解自己的JavaScript，This page可能会有所帮助。

这仍然是一种愚蠢的游戏方式。如果您知道在提供页面之前不应该呈现元素，那么最好省略它。如果你不想省略元素，只需隐藏它，然后强制它隐藏; style="display: none"

Answer 3

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

添加display：table;应该做的。

Answer 4

如果必要在HTML中使用div.someElement，那么最好的CSS / HTML方法是在添加的内容周围添加额外的div具有填充属性

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

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

否则，按照Pekka的说法去做，或者看看让javascript为你做这件事。

Answer 5

我想不出只有这样做的CSS。

我会尝试在我知道其中是否有任何内容时决定是否呈现该元素。这可能是最干净的解决方案。

Answer 6

在生成内容时，为空元素指定一个不同的类（比如someHiddenElement）。然后将someHiddenElement { display: none }添加到您的样式表中。

Answer 7

在您填充可选div的位置，如果没有要插入的文字，请尝试将CSS display属性更改为none.根据this source （和其他人），display: none从文档中完全删除元素。它不占用任何空间，即使它的HTML仍然在源代码中。

Answer 8

不要在容器上使用填充，在内容上使用保证金。与没有内容时相比，容器仍然是不可见的。

删除空元素的填充

8 个答案: