一：垂直外边距的重叠

1.1 介绍

相邻的垂直方向会外边距重叠现象。

1.2 兄弟元素

兄弟元素间的相邻垂直外边距会取两者中的较大值。（都是正值）
<div class="box1"></div>
<div class="box2"></div>

.box1{margion-bottom:100px}
.box2{margin-top:200px}
那么box1和box2直接的边距就是200px;

兄弟元素之间的值如果有一正一负则取两个数字的和。  

兄弟元素之间相邻的都是负值，则取绝对值较大的。

兄弟之间的外边距是对我们开发有利的，所以我们不需要处理。

1.3 父子元素的外边距

<div class="box3">
	<div class="box4">
	</div>
</div>
.box3{width:200px;height:200px;background-color:#bfa;}
.box4{width:100px;height:100px;background-color:orange;margin-top:100px;}

- 父子元素的相邻外边距，子元素会传递给父元素（上外边距）。
- 父子外边距的折叠会影响页面的布局，必须要进行处理。