今天在写页面的时候发现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。
