为什么嵌套的 HTML 元素会使我的 CSS 跳跃？

Question

这是一个谜题。基本页面，一个元素：

http://jsfiddle.net/PZj6t/

HTML：

<div id="container"></div>​

CSS：

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: black;
}
#container {
    position: relative;
    margin: 0 auto;
    width: 400px;
    height: 100%;
    background-color: #666;
}
​

那个看起来像我想要的那样，#container 整齐地齐平到顶部。但是当我添加一个嵌套元素时：

http://jsfiddle.net/PZj6t/1/

HTML：

<div id="container">
    <nav id="topnav"></nav>
</div>​

CSS（新）：

#topnav {
    width: 100%;
    height: 40px;
    margin: 30px 0;
    background-color: red;
}
​

容器跳下。似乎#topnav 的margin-top 以某种方式传递给了容器，现在页面有一个我不想要的滚动条。 （我正在 Chrome 中进行测试。）如何防止这种情况发生？

（还有一个谜团，如果我将 border: 1px solid white; 添加到 #container 的 CSS 中，跳转就会消失。这很好，除了还会在页面上添加两个像素的不良滚动。）

Answer 1

这是由于 CSS 的一项称为边距折叠的功能。如果父元素上没有内边距或边框，则父元素及其子元素的边距“折叠”为两者中较大的值，并且本质上应用于父元素。

对于您的情况，我建议您在容器内简单地添加一个额外的内包裹，并在其上添加一些填充以模拟您正在寻找的边距效果：http://jsfiddle.net/PZj6t/3/

#inner 或以下 div 内的任何内容都应按预期运行，因为边距仅在其父级边缘时才会折叠（并且不存在填充或边框）。

Answer 2

display:inline-block;

在您的导航元素出现时将解决此问题。它与边距折叠有关，请参阅here 了解更多详细信息。

Answer 3

Jblasco 是正确的，不过这是一个更简洁的解决方案：http://jsfiddle.net/PZj6t/4/

#container {
    position: relative;
    margin: -1px auto 0;
    width: 400px;
    height: 100%;
    padding-top:1px;
    background-color: #666;
}
#topnav {
    width: 100%;
    height: 40px;
    margin: 29px 0 30px;
    background-color: red;
}

Answer 4

#container {
    margin: 0 auto;
    width: 400px;
    height: 100%;
    background-color: #666;
    border:1px solid;
}

http://jsfiddle.net/PZj6t/12/

Update:

http://jsfiddle.net/PZj6t/1/
在container 和topnav 上应用display:inline-block;