Question

以下示例定义了两种样式：undisplayed只设置display:none，noheight将Box模型中的所有高度属性设置为0px。它还会根据Div height:0px does not work?中的建议设置line-height和overflow。

每种风格都有一个段落，上面和下面都有一条水平线。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>noheight &ne; undisplayed</title>
    <style>
      .undisplayed {
        display:none;
      }
      .noheight {
        max-height:0px;
        height:0px;
        border-width:0px;
        outline-width:0px;
        margin-top:0px;
        margin-bottom:0px;
        padding-top:0px;
        padding-bottom:0px;
        visibility:hidden;
        line-height:0px;
        overflow:hidden;
      }
      </style>
  </head>
  <body>
    <h3>undisplayed:</h3>
    <hr/>
    <p class="undisplayed">text</p>
    <hr/>
    <h3>noheight:</h3>
    <hr/>
    <p class=noheight>text</p>
    <hr/>
  </body>
</html>

我在Firefox 23.0.1和Safari 6.0.5上测试了这个。在这两种情况下，noheight段落周围的两条水平线之间的间隙大于undisplayed段落周围的间距。为什么呢？

我有兴趣找出原因有两个原因：

我讨厌一个谜。
我一直在玩CSS动画，让一些内容合同无所事事。使用动画更改noheight类中提到的高度属性，我总是留下额外的垂直空间。我知道我可以用jQuery做到这一点，而我用CSS动画做的努力可能看起来不那么光滑，但我正在尝试以提高我的理解。

我希望我的noheight样式的属性列表是一种过度杀伤，有一些冗余。如果是这样，那么什么是多余的（例如，可以安全地省略，例如，Chrome，IE，Firefox和Safari的近期（ish）版本）？

Answer 1

请参阅Margin collapsing

当.undisplayed元素的display设置为none时，他会从可见树中移除，因此周围hr的两个边距已折叠

但对于.noheight元素，情况并非如此，元素仍然存在并呈现（为0px高），因此边距无法崩溃。

将所有CSS高度设置为0px会使渲染高度> gt; 0

1 个答案: