今天在写页面的时候发现两个div之间有空隙，然后查阅资料发现是因为h2的margin值问题。
网上看到的一个例子：
<style type="text/css">
*{ /*注意*/
margin: 0;
padding: 0;
}
#foo{
margin: 0;
background: red;
}
#bar{
margin-top: 10px; /*注意：这里margin值是0或者比20px小都会有空隙*/
background: blue;
color: #fff;
}
#bar-hd{
margin-top: 20px; /*注意*/
}
</style>
<body>
<div id="foo">
<h1 id="foo-hd">Sample Text</h1>
</div>
<div id="bar">
<h1 id="bar-hd">盒模型中规定了垂直边界重叠，这个h1有一个向上的margin值（20px），叠加到了父元素#bar上，虽然#bar本身有一个向上的margin值（10px），但重叠部分取其大者，因此#foo和#bar之间出现的是20px的空隙</h1>
</div>
509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
