__x__(22)0907第四天__ 垂直外邊距重疊

外邊距重疊，

也叫「外邊距合併」，指的是，當兩個外邊距相遇時，它們將造成一個外邊距。

合併後的外邊距的高度，等於兩個發生合併的外邊距的高度中的較大者。。。在佈局時，易形成混淆。

---

1. 上下元素 垂直外邊距重疊

垂直相鄰的兩個 div，上面的 div 設置了 margin-bootom，遇到下面 div 設置的 margin-top，會發生重疊，產生一個較大的外邊距

---

2. 父子元素 垂直外邊距重合

父子元素 div 時，爲子元素 div 設置上邊距時，兩個 div 都會發生向下偏移，此時父子元素的外邊距重疊。

當一個元素包含在另外一個元素中時（假設沒有內邊距 padding 或邊框 border 把外邊距分隔開），它們的上和/或下外邊距也會發生合併。

 

---

 

3. 空元素自身 垂直外邊距重疊

假設有一個空元素，它有外邊距，可是沒有邊框或填充。在這種狀況下，上外邊距與下外邊距就碰到了一塊兒，它們會發生重疊。

---

 解決方法：

• 爲父元素加一個 padding 或者 border。。。缺點：改變了可見框的大小，須要減去適應。。。這裏增長了，須要在那裏減少。
• 設置父元素 overflow = hidden; 來快開啓BFC。