今天在寫頁面的時候發現margin-top失效，父元素與子元素之間距離為零。百思不得其解。
如圖：
代碼如下：
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>test</title> 5 </head> 6 <body style="background:#2C3636;"> 7 <div id="main" style="width:90%;max-width:600px;margin:70px auto auto auto;"> 8 <div class="container" style="background:rgba(226, 236, 236, 0.13);width:84%;min-width:100px;border-radius:7px;padding:8%;margin-top:40px;"></div> 9 </div> 10 </body> 11 </html>
很明顯元素main與container之間並沒有margin的存在。
百度之后發現應該是兩者之間的margin-top被折疊了，main的margin更大，因此container的margin沒有體現出來。
w3cshcool中的解釋是：外邊距合並指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合並后的外邊距的高度等於兩個發生合並的外邊距的高度中的較大者。
外邊距合並的條件
- 當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合並。
- 當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合並。
- 當一個空元素沒有邊框或填充時，上下外邊距碰到了一起，也會發生合並。
避免外邊距合並
- 行內框
- 浮動元素
- 絕對定位元素
因此要避免外邊距合並，可以：
- 給父元素添加一個小的padding-top。
- 給父元素添加樣式：overflow:hidden;
- 將其設為浮動元素或絕對定位。
- 給父元素添加border。
