css - 为什么嵌套的 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 或以下的任何内容都应如您所愿，因为边距只有在其父级的边缘时才会折叠(并且不存在填充或边框)。