<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>外边距自动合并</title>
<style type="text/css">
.one,.two{
width:300px;
height:300px;
}
.one{
background-color: red;
margin-bottom:30px;
}
.two{
background-color: green;
margin-top:20px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
上下元素的外边距，采用了更大的30px。红绿色块之间的间隔是30px。
合并外边框，变大，采取最大的那个。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>外边距自动合并</title>
<style type="text/css">
.one{
width:300px;
height:300px;
}
.two{
width:100px;
height:100px;
}
.one{
background-color: red;
margin-top:30px;
}
.two{
background-color: green;
margin-top:50px;
}
</style>
</head>
<body>
<div class="one">
<div class="two"></div>
</div>
</body>
</html>
都是距离顶部的外边距，采取更大的外边距。so距离顶部是50px
