塊級元素的上外邊距（margin-top）與下外邊距（margin-bottom）有時會合併為單個外邊距，這樣的現象稱為「margin合
並」。產生摺疊的必備條件：margin必須是鄰接的!
而根據w3c規範，兩個margin是鄰接的必須滿足以下條件：
•必須是處於常規文件流（非float和絕對定位）的塊級盒子，並且處於同乙個bfc當中。
•沒有線盒，沒有空隙，沒有padding和border將他們分隔開
•都屬於垂直方向上相鄰的外邊距，可以是下面任意一種情況
•元素的margin-top與其第乙個常規文件流的子元素的margin-top
•元素的margin-bottom與其下乙個常規文件流的兄弟元素的margin-top
•height為auto的元素的margin-bottom與其最後乙個常規文件流的子元素的margin-bottom
•高度為0並且最小高度也為0，不包含常規文件流的子元素，並且自身沒有建立新的bfc的元素的margin-top
和margin-bottom
margin合併的3種場景：
（1）相鄰兄弟元素margin合併。
解決辦法：
•設定塊狀格式化上下文元素（bfc）
（2）父級和第乙個/最後乙個子元素的margin合併。
解決辦法：
對於margin-top合併，可以進行如下操作（滿足乙個條件即可）：
•父元素設定為塊狀格式化上下文元素；
•父元素設定border-top值；
•父元素設定padding-top值；
•父元素和第乙個子元素之間新增內聯元素進行分隔。
對於margin-bottom合併，可以進行如下操作（滿足乙個條件即可）：
•父元素設定為塊狀格式化上下文元素；
•父元素設定border-bottom值；
•父元素設定padding-bottom值；
•父元素和最後乙個子元素之間新增內聯元素進行分隔；
•父元素設定height、min-height或max-height。
（3）空塊級元素的margin合併。
解決辦法：
•設定垂直方向的border；
•設定垂直方向的padding；
•裡面新增內聯元素（直接space鍵空格是沒用的）；
•設定height或者min-height。
margin重疊指的是在垂直方向上，兩個相鄰元素的margin發生重疊的情況。
一般來說可以分為四種情形：
第一種是相鄰兄弟元素的marin-bottom和margin-top的值發生重疊。這種情況下我們可以通過設定其中乙個元素為bfc
來解決。
第二種是父元素的margin-top和子元素的margin-top發生重疊。它們發生重疊是因為它們是相鄰的，所以我們可以通過這
一點來解決這個問題。我們可以為父元素設定border-top、padding-top值來分隔它們，當然我們也可以將父元素設定為bfc
來解決。
第三種是高度為auto的父元素的margin-bottom和子元素的margin-bottom發生重疊。它們發生重疊乙個是因為它們相
鄰，乙個是因為父元素的高度不固定。因此我們可以為父元素設定border-bottom、padding-bottom來分隔它們，也可以為
父元素設定乙個高度，max-height和min-height也能解決這個問題。當然將父元素設定為bfc是最簡單的方法。
第四種情況，是沒有內容的元素，自身的margin-top和margin-bottom發生的重疊。我們可以通過為其設定border、pa
dding或者高度來解決這個問題。
margin重疊問題
寬高100，底外距50 寬高100，上外距20 a c.d 當div.c標籤無內容時 d標籤的上邊距消失了 div.c有內容時 d標籤上邊距顯示 當有div巢狀，且外層div無內容，此時內層div的margin會消失，解決辦法有6種 1.外層c標籤 overflow hidden padding t...
忽略的問題 margin重疊
1.margin同向重疊。問題描述 解決方法 e.給內層div們設定float屬性 記得最後閉合浮動或者清除浮動 2.margin異向重疊 問題描述 依舊如上圖，first和second盒子都有margin 10px，但是顯示出來兩個盒子的距離卻不是20px，而仍然是10px。也就是說此時上面盒子的...
margin重疊與穿透問題
出現margin重疊的原因 同乙個bfc裡面兩個塊級元素會出現margin摺疊。解決方式 讓兩個塊級元素不在乙個bfc內。預設情況，子元素設定margin top或者margin bottom會影響其父元素，這就是所謂的margin穿透。解決方式 1.給父元素加個border 2.將父元素變成bfc...