有没有办法只在文本存在时向元素中的文本添加填充？

Question

只使用HTML5和CSS3是否有一种方法可以添加填充或者至少只有在文本存在时才会对元素中的文本进行填充？

这是一些示例代码和一个可以使用的演示。

CSS：

.container {
    background-color:red;
}

.text {
    text-align:center;  
    font-size:18px;
    padding:10px;
}

HTML：

<div class='container'>
    <p class='text'>text</p>
</div>

只要没有文本，容器的0px为高{

DEMO

Answer 1

.text {
    text-align: center;  
    font-size: 18px;
    padding: 10px;
}
.text:empty {
    padding: 0px;
}

请注意，这在IE＆lt; 8中不起作用。如果您需要，可以使用JavaScript（例如if (text.children.length === 0) text.style.padding = '0px'）或JavaScript后备库，例如Selectivizr。

这是a JSFiddle。

:empty psuedo-class。

的an MDN reference page