1、margin外边距重叠

如果有两个div，一个设置了下边距，一个设置了上边距，此时浏览器并不会将两个边距进行相加，而仅是只会取其中一个最大的值作为边距。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <style>
  8.     div{
  9.         width: 300px;
  10.         height: 300px;
  11.         border: 10px solid black;
  12.         background-color: rebeccapurple;
  13.     }
  14.     .one{
  15.         margin-bottom: 50px;
  16.     }
  17.     .two{
  18.         margin-top: 50px;
  19.     }
  20. </style>
  21. <body>
  22.     <!-- 要注意上下外边距并不会相加，只会取其中最大的值作为外边距 -->
  23.     <div class="one"></div>
  24.     <div class="two"></div>
  25. </body>
  26. </html>

2、解决办法

  1. 只给一个设置就好了，比如要实现100的外边距，那就不要给两个div都设置50了，只设置一个的top或者bottom为100就可以了。
  2. 用flex进行布局也可以解决这个问题： ```html <!DOCTYPE html>

```