Question

我在网页顶部有一个容器，用于动态显示状态消息。默认情况下，容器是空的，但它仍然可见，因为红色背景和填充。

如果只有在使用CSS内部有文本的情况下才能使这个容器可见？

#status_container {
  width: 240px;
  padding: 6px 16px;
  margin: 5px 8px;
  height: auto;
  background: red;
}
<div id="status_container"></div>

Answer 1

相反，将样式应用于子元素。然后使用CSS显示该子元素（如果它存在）：

.status_container {
  overflow: hidden;
}

.status_container > p {
  padding: 6px 16px;
  margin: 5px 8px;
  background: red;
}

<div class="status_container">
    <p>Upload successful.</p>
</div>

在父级上设置overflow: hidden，以便子级p的边距仍然可见

请参阅此jsFiddle一条空的完整讯息。

Answer 2

当对象为空时，有CSS :empty class个触发器。

Answer 3

您可能希望删除垂直填充，并使用line-height。这样，没有任何内容，容器将没有高度。

例如：

#status_container {
    width: 240px;
    padding: 0 16px;
    margin: 5px 8px;
    height: auto;
    background: red;
    line-height: 30px;
}

请参阅此jsFiddle Demo

仅在文本内部显示容器

3 个答案: