删除空元素的填充答案

【问题标题】：Remove padding for an empty element删除空元素的填充
【发布时间】：2010-12-31 20:36:40
【问题描述】：

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

【问题讨论】：

标签： html css cross-browser

【解决方案1】：

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

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

遗憾的是，Internet Explorer 还不支持该功能。对于所有其他浏览器，它应该做得很好......

【讨论】：

【解决方案2】：

给元素一个id 属性。然后，您可以在页面加载后使用 Javascript 检查它的 innerHTML 属性。如果 innerHTML 的长度为零，那么您可以将它的 display 属性设置为 none。如果您不了解 javascript，This page 可能会有所帮助。

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

【讨论】：

您不一定要给它一个id 属性。但无论如何 +1，我认为 JavaScript 是这里的必经之路。看看 jQuery 以简化此操作：jquery.com
这样渲染的页面，看起来有点傻——首先加载它并应用 CSS（渲染 5px 空间，如本例所示），然后应用 JS 修复，空间消失.
@naivists - 同意，但如果您提供静态 HTML，则很难解决。
@naivists 为避免这种情况，您可以做相反的事情：首先隐藏所有元素，然后使用 Javascript 显示非空元素。

【解决方案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>

添加显示：表格；应该做的伎俩。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

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

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

【讨论】：

【解决方案6】：

我想不出只有 CSS 可以做到这一点。

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

【讨论】：

【解决方案7】：

不要在容器上使用填充，在内容上使用边距。比没有内容时，容器保持不可见。

【讨论】：

它不起作用，我的背景颜色仍然显示。

【解决方案8】：

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

【讨论】：