使用margin定义块垂直外边距时，可能会出现两个元素间的外边距合并
1、相邻元素的垂直外边距合并
当上下两块元素相遇时，假如上元素设置了margin-bottom，而下元素设置了margin-top，则此时就会出现合并，两个元素的垂直距离取margin-bottom和top两者之间较大者
<html>
<body>
<div class="dad"></div>
<div class="son"></div>
</body>
<style>
.dad{
width:600px;
height:600px;
margin-bottom:10px;
background-color: black;
}
.son{
width:300px;
height:300px;
margin-top:20px;
background-color: blue;
}
</style>
</html>
效果如图，蓝黑两个元素设置了margin-top和bottom后，间距并不是10+20 = 30px，其实是取了两者之间较大者，margin-top = 20px
解决方法
- 设置左浮动
float:left - 转为行内块级元素
display:inline-block
2、父子元素之间垂直外边距合并
两个嵌套关系的元素，如果父元素没有上内边距(padding-top)和边框(border)，此时父元素的上外边距就会和子元素的上外边距合并，最终的margin-top值为两者之间较大者
<html>
<body>
<div class="dad">
<div class="son"></div>
</div>
</body>
<style>
.dad{
width:600px;
height:600px;
margin-top:10px;
background-color: black;
}
.son{
width:300px;
height:300px;
margin-top:100px;
background-color: blue;
}
</style>
</html>
效果如图，子元素并没有像预期的一样距父元素顶部100px，而是紧挨着父元素顶部，而父元素并没有没有距其上部10px，而是变成了100px，在这里就发生了外边距的合并
解决方法
- 给父元素添加border
float:left- 绝对定位
- 父元素添加padding-top
display:inline-block- 父元素添加
overflow:hidden - 父元素添加
overflow:auto
