<!DOCTYPE html>
<html>
<head>
<style>
#a{
background-color:red;
height: 100px;
color: #fff;
}
#b{
width: 60%;
margin-left: auto;
margin-right: auto;
background-color:blue;
height: 50px;
margin-top: 50px;
color: #fff;
}
</style>
</head>
<body>
<div id="a">
<div id="b">b</div>
a
</div>
</body>
</html>
6.png
这里看到明明是b设置的margin-top，对自己没效果反而对a产生效果了。这是因为当父级元素没有设置border-top或者padding-top的时候，他的第一个子节点（这里包括元素节点和文本节点）如果设置了margin-top，那么这个margin-top会一层层往上越级直到遇到(1)一个设置了border-top或者padding-top的父元素或者(2)直到遇到body或者(3)此父级元素的第一个子节点不为他或他的父元素的时候才停下。（这里表述不清，请自己写code体会，注意每个div里面文本的位置）
** 解决方法： **
给父元素设置一个border-top或者padding-top把子元素管住就可以防止越级了。比如给#a加上border-top: 1px solid transparent;或者padding-top:1px;
cd.gif
外边距合并并不是浏览器的bug，因为所有的现代浏览器都有这个行为，而且在标准里面也写了。
参考：CSS 外边距合并**
作者：Yuki Cland
链接：https://www.zhihu.com/question/24279692/answer/27272393
来源：知乎
