带有红色边框的空div显示为红线 - 我可以仅使用CSS隐藏它吗？

Question

我有一个div,其中将表示错误.我的问题是,因为它有一个红色边框,即使div为空(没有错误),它也会显示为空行.我不喜欢这种行为; 我更喜欢div在空的时候是完全不可见的.

另外,我不想用javascript这样做 - 当div只用CSS时是否可以隐藏边框？

Answer 1

是.以下是使用空单元的一种可能解决方案:

CSS

.error {
    display:table-cell;
    empty-cells:hide;
    padding: 10px;
    border: 1px solid red;
}

HTML

<div class="error"><!-- I am empty --></div>
<div class="error">Error'd!</div>

Answer 2

?div{
    border:1px solid red
}

div:empty{
    display:none
}