<!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設(shè)置的margin-top梨树，對自己沒效果反而對a產(chǎn)生效果了。這是因為當(dāng)父級元素沒有設(shè)置border-top或者padding-top的時候喂窟，他的第一個子節(jié)點（這里包括元素節(jié)點和文本節(jié)點）如果設(shè)置了margin-top，那么這個margin-top會一層層往上越級直到遇到(1)一個設(shè)置了border-top或者padding-top的父元素或者(2)直到遇到body或者(3)此父級元素的第一個子節(jié)點不為他或他的父元素的時候才停下。（這里表述不清磨澡，請自己寫code體會碗啄，注意每個div里面文本的位置）
** 解決方法： **
給父元素設(shè)置一個border-top或者padding-top把子元素管住就可以防止越級了。比如給#a加上border-top: 1px solid transparent;或者padding-top:1px;
cd.gif
外邊距合并并不是瀏覽器的bug稳摄，因為所有的現(xiàn)代瀏覽器都有這個行為稚字，而且在標(biāo)準(zhǔn)里面也寫了。
參考：CSS 外邊距合并**
作者：Yuki Cland
鏈接：https://www.zhihu.com/question/24279692/answer/27272393
來源：知乎
