1.在什么場景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例。

• 外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。其中兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，合并結(jié)果是它們兩者之間較大的值；兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，合并結(jié)果是兩者絕對(duì)值的較大值；
  兩個(gè)外邊距一正一負(fù)時(shí)，合并結(jié)果是兩者的相加的和。

外邊距合并的場景：

• 當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并。

防止此種情況下的外邊距合并可以設(shè)置元素的display:inline-block；
如果只有兩個(gè)相鄰元素可以設(shè)置后面的元素float:left；
設(shè)置父元素的display：flex可以讓相鄰元素脫離垂直排列關(guān)系，故也可以防止上下外邊距合并,但子元素的寬高變得不受限。

0_1481373444240_屏幕快照 2016-12-10 下午8.23.42.png

• 當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會(huì)發(fā)生合并，即為父子外邊距合并的情況，如下圖：

  
  
  0_1481363708193_屏幕快照 2016-12-10 下午5.54.47.png

阻止父子元素的邊距合并可以設(shè)置父元素的border和padding參數(shù)，也可以設(shè)置父元素float:left,display:inline-block,positon:absolute,overflow(除了visible均可)來實(shí)現(xiàn),還有一種是給父元素添加內(nèi)容。（例如下圖所示）

0_1481373895143_屏幕快照 2016-12-10 下午8.43.39.png

• 假設(shè)有一個(gè)空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會(huì)發(fā)生合并；如果這個(gè)外邊距遇到另一個(gè)元素的外邊距，它還會(huì)發(fā)生合并。
  防止空元素造成的外邊距合并可以先給空元素設(shè)置相關(guān)參數(shù)，讓其變成有參數(shù)的元素，然后再參照其他兩種邊距合并情況下的處理方式去修復(fù)。