相關知識點：

塊級元素的上外邊距（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-bottommargin合并的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 重叠问题的理解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。