我正在从乔恩·杜克特（Jon Duckett）的书中学习HTML和CSS，并且在第15章中遇到了固定布局示例的问题。我的问题是我输入的新内容似乎不符合边距：10px; 规则（至少我认为这是最高利润）。
这是我的示例：
书中的示例：“固定宽度的布局”：示例
的HTML
* {
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;
}
body {
width: 960px;
margin: 0 auto; /* top/bottom left/right*/
}
#content {
overflow: auto;
height: 100%;
}
#nav, #feature, #footer, #test /*This ID*/ {
background-color: #efefef;
margin: 10px;
padding: 10px;
}
#article_column1, #article_column2, #article_column3 {
float: left;
width: 300px;
margin: 10px;
background-color: #efefef;
}
li {
display: inline;
padding: 5px;
}
a{
text-decoration: none;
}<div id="header">
<h1>Logo</h1>
<div id="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Product</a></li>
<li><a href="">Service</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="feature">
<p>Feature</p>
</div>
<!--Problem Starts Here-->
<div id="test">
<p>Why is your margin-top so small?</p>
</div>
<!-- Problem Ends Here -->
<div id="article_column1">
<p>Column One</p>
</div>
<div id="article_column2">
<p>Column Two</p>
</div>
<div id="article_column3">
<p>Column Three</p>
</div>
</div>
<div id="footer">
<p>© Copyright 2011</p>
</div>
预先感谢您的任何帮助
您正在处理Mozilla开发人员网络中的“边际崩溃” ：
块的顶部和底部边距有时会合并（折叠）为一个边距，其大小是合并到其中的最大边距，这种行为称为边距折叠。
更新：
覆盖此现象的最好方法是在它们之间添加一个元素以破坏崩溃：
<div style="overflow: hidden; height: 0px; width: 0px;">.</div>
更新了jsFiddle
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句