这时两者之间的距离刚好为100px。
补充说明：大家可以看到，为了使得两个div（块状元素）脱离正常的文档流我使用了display:inline-block;属性，另外，我还把body的font-size设置为0，这样可以解决inline-block自身的问题，否则两个div的举例会大于100px。当然使用float也可以使得两个div出现在同一行中。
（2）竖直方向的外边距合并
两个竖直方向的盒子相遇时，其竖直方向的距离等于上方盒子的下外边距和下方盒子的上外边距中较大的一个。
例2：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>水平方向的两个盒子</title>
<style>
*{
margin:0;
padding:0;
border:0;
}
.top{
width: 100px;
height: 100px;
margin-bottom: 100px;
background: red;
}
.bottom{
width: 100px;
height: 100px;
margin-top: 50px;
background: green;
}
</style>
</head>
<body>
<div class="top">高为100px,下边距为100px</div>
<div class="bottom">高为100px,上边距为50px</div>
</body>
</html>
效果如下：
这时我们肉眼都可以观察出来，两者竖直方向的举例大约为100px（实际就是100px）而非100+50=150px；这正是因为两个竖直方向的盒子相遇时，其竖直方向的距离等于上方盒子的下外边距和下方盒子的上外边距中较大的一个。
另外一个有趣的例子就是：假设有一个元素同时设置了margin-top和margin-bottom，但是内容为空，那么这两个margin值也会叠加，值为两者最大的一个，它类似与竖直方向上两个盒子margin值的叠加。代码如下：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>水平方向的两个盒子</title>
<style>
*{
margin:0;
padding:0;
}
.top{
width: 500px;
height: 100px;
background: red;
}
.middle{
margin-top: 100px;
margin-bottom:50px;
}
.footer{
width: 500px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div class="top">上面的div,高100px</div>
<div class="middle"></div>
<div class="footer">下面的div，高100px</div>
