css 空白外边距互相叠加的解决方法

CSS空白外边距叠加是指当两个或多个元素的边距在垂直方向上相遇时，它们之间的相邻外边距将会合并并仅仅保留两个元素之间的最大高度值。这种合并现象在进行垂直布局时可能会出现问题，导致设计上的限制或错误。以下是两条常用的解决方法:

1. 使用padding代替margin实现元素间的距离

使用padding来代替margin是框模型的一个聪明的技巧，它发生在框上内边界和框内容之间不受外边边距影响。这种方法更为灵活，而且不会受同一父元素下相邻子元素的外边距所影响。

<style>
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

  .wrapper {
      width: 500px;
      height: 500px;
      border: 1px solid gray;
      padding: 40px; 
    }

  .child { 
      background-color: bisque;
      height: 100px;
    }

  .child:last-of-type {
      margin-top: 20px;
    }
 </style>

 <div class="wrapper">
    <div class="child"></div>
    <div class="child"></div>
 </div>

2. 使用css的clear属性消除外边距合并

在css中，我们可以通过clear属性来消除外边距的合并问题。clear属性被用于清除一个浮动元素对后续元素的影响，以便可以将后续元素放到浮动元素下方。通过使用clear属性，我们可以使相邻元素之间的外边距不合并。

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .wrapper {
    width: 500px;
    height: 500px;
    border: 1px solid gray;
  }

  .child { 
    background-color: bisque;
    height: 100px;
    margin-bottom: 20px;
  }

  .child:last-of-type {
    clear:both;
  }
</style>

<div class="wrapper">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

在这个例子中，最后一个子元素使用了clear属性。它的背后原理是，clear属性允许元素被设置成不允许浮动。当一个元素被设置成不允许其它浮动元素时，它后面的元素将不再受到浮动元素的影响。

总而言之，解决空白外边距叠加的问题需要采用一些技巧，而这两种方法可以让我们更好地控制页面的外观和排版。