我对以下 HTML/CSS 代码有疑问：
CSS
* { padding: 0; margin: 0; border: none; outline: none; }
#container {
margin: 10px auto 10px auto;
width: 960px;
background-color: #dddddd;
border: solid 1px black;
}
#container2 {
margin-left: 200px;
margin-top: 400px;
background-color: yellow;
}
HTML
<body>
<div id="container">
<div id="container2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</body>
示例页面看起来如我所料，即下部 div（黄色）从外部 div（灰色）的顶部边框向下推 400px。
但是，当您删除行时：border: solid 1px black;从样式定义#container，外部 div（灰色）与内部 div（黄色）从相同的顶部位置开始。
这种情况发生在 Firefox 3.x 和 Chrome 中。
有人可以解释为什么会发生吗？在我看来，删除边框样式根本不会影响此布局。
边框分隔折叠边距：http://www.w3.org/TR/CSS21/box.html#collapsing-margins
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
