当父元素没有边框border时，子元素加margin-top（这里以第一个子元素的 margin-top为例），会出现 margin-top加在父元素上的bug。
解决方法有四种：1.给父元素加border。
2.给父元素加padding。
3.给父元素加overflow:hidden。
4.(推荐使用) 给父元素加前置内容生成。
css 四种方法：
#parent{
width:300px;
height:200px;
background-color:yellow;
/*①给父元素加border*/
/*border:1px solid black;*/
/*②给父元素加padding*/
/* padding-top:10px;*/
/*③给父元素加overflow:hidden*/
/*overflow:hidden;*/
/*④ 给父元素加前置内容生成*/
}
#parent:before{
content:" ";
display:table;
}
#child{
width:100px;
height:50px;
background-color:red;
margin-top:50px;
}
这是html页面：
<div id="parent">
<div id="child"></div>
</div>
第一个子元素的margin-top和最后一个子元素的margin-bottom越界问题
原文：http://www.cnblogs.com/huangweitao/p/5059007.html