html - 有没有办法仅在文本存在时为元素中的文本添加填充？

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高，结构就可以改变。

score 6 · Accepted Answer

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

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

1 回答 1