为什么嵌套的 HTML 元素会让我的 CSS 跳转？

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

http://jsfiddle.net/PZj6t/ 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/ 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，跳转消失了。这很好，除了还会向页面添加两个像素的不需要的滚动。）

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

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

范围内的任何东西#innerdiv 或以下的行为应如您所期望的那样，因为边距仅在位于其父级边缘时才会折叠（并且不存在填充或边框）。