合并外邊距的場景：
- 相鄰的兩個元素之間的上下邊距
- 父元素與其第一個或最后一個子元素之間
- 空塊元素自身的上下邊距
相鄰元素
當兩個元素上下相鄰時掌桩，上面的下外邊距會與下面元素的上外邊距會合并舀武。
image.png
注意：如果元素左右相鄰闹获，是不會合并外邊距的，因為行內(nèi)元素不合并外邊距该默；
父子元素
父子元素如果都有上邊距，會合并為其中較大的那一個。
image.png
空塊元素
如果一個塊級元素中不包含任何內(nèi)容梧躺，并且在其 margin-top 與 margin-bottom 之間沒有邊框、內(nèi)邊距傲绣、行內(nèi)內(nèi)容掠哥、height、min-height 將兩者分開秃诵，則該元素的上下外邊距會折疊续搀。
image.png
如果這個外邊距遇到另一個元素的外邊距，它還會發(fā)生合并：
image.png
如何不讓相鄰元素外邊距合并菠净？
- 在其中添加一個空的div禁舷，阻止他們在同一個BFC
- 處于靜態(tài)流的元素會發(fā)生合并彪杉，所以設(shè)置 float 和 position:xxx都不會發(fā)合并
- 設(shè)置為 inline-block 也不會發(fā)生合并
父子元素外邊距合并示例：
合并邊距004.png
合并邊距001.png
合并邊距002.png
通過示例可以看到，父元素的下邊距與子元素的下邊距發(fā)生了合并牵咙，合并為較大的100px派近；
