塊的頂部外邊距和底部外邊距有時(shí)候會(huì)被折疊為單個(gè)外邊距，其大小為兩值中的最大值颜骤，這種行為就被稱(chēng)為外邊距合并。 一般發(fā)生外邊距合并主要有以下三種情況：
相鄰兄弟姐妹元素
父元素和子元素
空元素
相鄰兄弟姐妹元素
兩個(gè)兄弟元素之間的外邊距捣卤，會(huì)取兩個(gè)元素外邊距的最大值忍抽。
<p style="margin-bottom: 30px;">這個(gè)段落的下外邊距被合并...</p>
<p style="margin-top: 20px;">...這個(gè)段落的上外邊距被合并。</p>
按照上面的例子可以得出董朝，兩個(gè)p元素之間距離為30px鸠项。
父元素和子元素
這種情況又可以分為以下兩種：
父元素的上外邊距和第一個(gè)子元素的上外邊距
父元素的下外邊距和最后一個(gè)子元素的下外邊距
這兩種情況，最終顯示出來(lái)的結(jié)果都是取二者中的最大值子姜。
空元素
自己的上外邊距會(huì)和自己的下外邊距合并
<p style="margin-bottom: 0px;">這個(gè)段落的和下面段落的距離將為20px</p>
<div style="margin-top: 20px; margin-bottom: 20px;"></div>
<p style="margin-top: 0px;">這個(gè)段落的和上面段落的距離將為20px</p>
這樣第一個(gè)p元素和第三個(gè)p元素之間距離為20px
阻止合并方法
這部分將講解不會(huì)發(fā)生外邊距合并的情況祟绊。
通用方法
- 處于靜態(tài)流元素會(huì)發(fā)生合并，所以float和position:absolute都不會(huì)發(fā)生合并
- 設(shè)置為inline-block 哥捕，也不會(huì)發(fā)生合并
針對(duì)于父元素和子元素情況不合并方法
以下都不會(huì)發(fā)生合并
設(shè)置了清除浮動(dòng)屬性
因?yàn)閙argin需要直接接觸才能合并牧抽，所以父元素或子元素中有border或padding，或者二者之間有元素
注意
如果兩個(gè)外邊距值中有一個(gè)為0遥赚，也會(huì)發(fā)生合并阎姥。
如果有負(fù)外邊距，合并后外邊距為最大正邊距加上最小負(fù)邊距（絕對(duì)值最大的一個(gè)）鸽捻，如上面元素下邊距為20px呼巴，下面元素上邊距為-20px泽腮，則最后為0px
參考資料
