视频：https://www.bilibili.com/video/BV1pE411q7FU?p=153
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

对于两个嵌套关系（父子关系）的块元素，父元素有上边距同时子元素也有外边距，此时父元素会坍陷较大的外边距值。
这说的是啥？？？
下面看看例子吧。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  10.   <style>
  11.     .father {
  12.       width: 500px;
  13.       height: 300px;
  14.       background-color: blue;
  15.       margin-top: 200px;
  16.     }
  18.     .son {
  19.       width: 100px;
  20.       height: 100px;
  21.       background-color: red;
  22.       margin-top: 100px;
  23.     }
  24.   </style>
  25. </head>
  27. <body>
  28.   <div class="father">
  29.     <div class="son"></div>
  30.   </div>
  31. </body>
  33. </html>

效果图
image.png
红的并没有距离蓝的上边并没有100px，只有0px。
为啥呢？？？
下面用浏览器调试看看。
父div
image.png
子div
image.png
所以，子div的margin-top：100px，坍陷到父div的margin-top：200px的区域内了，就不能实现子div距离父div的上边为100px。

解决方案

  1. 为父元素定义上边框（border-top）
  2. 可以为父元素定义上内边距（padding）
  3. 可以为父元素添加overflow: hidden
  4. 其他方法，比如浮动、固定、绝对定位的盒子不会有坍陷问题。

下面是实现后的效果
image.png