空的div与红色边框是可见的一条红线 - 我可以隐藏它只有CSS？

问题描述

我有一个div，其中将表示错误。我的问题是，因为它有一个红色边框，它将显示为一个空行，即使当div是空的（没有错误）。我不喜欢这种行为;我更喜欢div是完全隐藏的，当它是空的。

I have a div which in which errors will be represented. My problem is that because it has a red border, it will be displayed as an empty line even when the div is empty (there are no errors). I don't like this behavior; I'd prefer the div to be completely invisible when it is empty.

此外，我不想这样做与javascript—是可能隐藏边框当div只有CSS是空的？

Also, I don't want to do that with javascript—is it possible to hide the border when the div is empty only with CSS?

推荐答案

是的。以下是一种使用的可能解决方案：

Yes. Here is one possible solution using empty-cells:

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>

这篇关于空的div与红色边框是可见的一条红线 - 我可以隐藏它只有CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！