前文
這是的一個經典的老問題，因為之前剛好有讀者朋友問到，順便整理一下。
從一個簡單例子說起
先看一個簡單示例：
| <style> .slide1 div { margin:10px 0; } </style> <div class="slide1"> <h3>第1種外邊距折疊：兄弟元素</h3> <p>文本上下間距10px</p> <p>文本上下間距10px</p> </div> |
看這個例子中的兩個p標簽，根據樣式定義：第一個p的margin-bottom和第二個p的margin-top 都是10px，那實際距離應該等于20px才對，但是用瀏覽器查看一下可以發現，最終的邊距是10px。 這個例子就是外邊距折疊：塊級元素的上外邊距和下外邊距有時會合并（或折疊）為一個外邊距。
分類情況
外邊距折疊有3種基本情況：
先不急著記憶，首先，前文的例子中就是第一種情況--相鄰的兩個元素之間發生的外邊距折疊。
第二種和第三種情況如下：
| <style> .father { background-color: green; } .child { margin-top: 50px; background-color: red; height: 300px; } .slide3 { margin: 10px 0; } </style> <h3>第2種外邊距折疊：父元素和首個子元素</h3> <div class="slide2 father"> <!-- 父元素是綠色 --> <div class="slide2 child"> <!-- 子元素是紅色 --> </div> </div> <h3>第3種外邊距折疊：空的塊級元素</h3> <div class="slide3"></div> |
他們的圖像也分別如圖：
情況2： 子元素的外邊距會“轉移”到父元素的外面
情況3：該元素的上下外邊距會折疊
好了，到這里我們不妨來看看這幾種情況的共同點（建議畫一下他們的盒模型，我懶就不畫了-_-）,可以發現發生外邊距折疊的共同原因：margin之間直接接觸，沒有阻隔。
如何理解直接接觸？很簡單：
新聞熱點
疑難解答
