4

下面的示例定义了两种样式：undisplayed简单地设置display:none，以及noheight将盒子模型中的所有高度属性设置为 0px。它还设置line-height并overflow根据Div height:0px 中的建议不起作用？.

这些样式中的每一种都有一个段落，其上方和下方都有一条水平线。

<!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。为什么？

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

  1. 我讨厌神秘。

  2. 我一直在玩 CSS 动画，以使某些内容的高度缩小到零。使用更改类中提到的高度属性的动画noheight，我总是留下额外的垂直空间。我知道我可以用 jQuery 做到这一点，而且我在 CSS 动画上所做的努力可能看起来不那么流畅，但我正在尝试以提高我的理解。

我希望我的noheight样式属性列表有点多余，有点多余。如果是这样，什么是多余的（即可以安全地省略，例如，Chrome、IE、Firefox 和 Safari 的最新（ish）版本）？

4

1 回答 1

4

见边距折叠

由于.undisplayedelement 已display设置为nonehe 从可视树中删除，因此来自两个周围hrs 的边距是collapsed。

然而，对于一个.noheight元素，情况并非如此，该元素仍然存在并呈现（高度为 0px），因此边距不能折叠。

于 2013-09-14T15:49:40.897 回答