Html 删除空元素的填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1992822/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove padding for an empty element
提问by Eric Falsken
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?
我正在为即将到来的门户网站生成一个页面，我有一个包含一些可选内容的 HTML 元素。如果元素为空，我希望元素不呈现，但向它添加一些填充会导致它呈现。如何向内容添加填充，但前提是内容存在？
.someElement{padding-top: 5px;}
HTML in question:
有问题的 HTML：
<div class="someElement">With padded content</div>
<div class="someElement"><!-- shouldn't render since it has no content --></div>
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.
基本上，我希望上面的第二个元素不占用任何空间。我正在所有主要浏览器中进行测试，使用 XHTML 1.1 doctype。
回答by MindTailor
You can do the trick with the CSS3 pseudo-class :empty
你可以用 CSS3 伪类 :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...
遗憾的是 Internet Explorer 尚不支持该功能。对于所有其他浏览器，它应该做得很好......
回答by vencedor
<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.
添加显示：表格；应该做的伎俩。
回答by deau
Give the element an idattribute. 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 pagemight help if you don't know your javascript.
给元素一个id属性。然后，您可以在页面加载后使用 Javascript 来检查它的 innerHTML 属性。如果innerHTML 的长度为零，那么您可以将其显示属性设置为none。如果您不了解 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="display: none"
回答by munch
If it's necessaryto have the div.someElementin the HTML, the best CSS/HTML way to do that would be to add an extra divaround the added content that has the padding property
如果它是必要有div.someElement在HTML，最好的CSS / HTML的方式做到这将是添加一个额外的div周围有padding属性添加的内容
.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.
否则，按照 Pekka 说的去做，或者看看让 javascript 为你做这件事。
回答by Pekka
I can't think of a CSS only way to do that.
我想不出只有 CSS 才能做到这一点。
I would try to decide whether the element is rendered at the time I know whether there will be any content in it. That is probably the cleanest solution.
我会尝试在我知道元素中是否有任何内容时决定是否呈现该元素。这可能是最干净的解决方案。
回答by Matteo Riva
Give the empty element a different class (say someHiddenElement) when you are generating the content. Then add someHiddenElement { display: none }to your style sheet.
someHiddenElement在生成内容时为空元素指定一个不同的类（比如）。然后添加someHiddenElement { display: none }到您的样式表。
回答by vito78
Don't use padding on container, use margin on content. Than when there is no content, container remains invisible.
不要在容器上使用填充，在内容上使用边距。与没有内容时相比，容器保持不可见。
回答by DOK
At the point where you populate the optional div, if there is no text to put in it, try changing the CSS displayproperty to none.According to this source(and others), display: noneremoves the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.
在填充 optional 时div，如果没有可放入的文本，请尝试将 CSSdisplay属性更改为none.根据此源（和其他源），display: none从文档中完全删除该元素。它不占用任何空间，即使它的 HTML 仍在源代码中。
