CSS中margin边界叠加问题及解决方案

当相邻的两个盒子之间有margin时，它们之间的距离不一定是两个盒子的margin之和。这种情况被称为margin边界叠加问题。这种问题可能会使得我们页面上的布局出现意料之外的对齐问题。

什么是margin边界叠加问题？

当一个元素的margin-bottom与其下一个兄弟元素的margin-top接触到一起时，它们的margin会发生合并，具体表现为取它们两者中的最大值。例如：

p {
  margin-bottom: 20px;
}

h1 {
  margin-top: 30px;
}

那么在<p>元素下面紧跟着一个<h1>元素时，它们之间的间距只会有30px而不是50px。

margin边界叠加的解决方案

使用padding或border解决

我们可以在相邻的元素之间添加一个border或padding来解决margin边界叠加问题。例如：

p {
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

h1 {
  margin-top: 30px;
  padding-top: 1px;
}

这样，<p>的下边框和<h1>的上边框之间就有了1px的间隔，而不会发生margin边界叠加了。

使用clear解决

我们还可以在第二个元素上使用clear属性来解决margin边界叠加问题。例如：

p {
  margin-bottom: 20px;
}

h1 {
  margin-top: 30px;
  clear: both;
}

这样，由于<h1>上设置了clear:both;，它就会被清除其前面的浮动元素或margin边界。这时，<p>与<h1>之间的距离，就是它们自身的margin之和。

示例

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

.container {
  margin: 20px;
  border: 1px solid #ccc;
  overflow: auto;
}

.box1 {
  float: left;
  width: 50%;
  height: 50px;
  margin-bottom: 20px;
  background-color: red;
}

.box2 {
  float: left;
  width: 50%;
  height: 50px;
  margin-top: 30px;
  background-color: blue;
}

以上代码中，<div>标签中的两个子元素<div class="box1">和<div class="box2">之间有一个30px的间隔距离。这是因为当两个相邻的元素margin之间的距离少于它们各自的margin之和时，它们之间的间距只会是它们各自margin值的最大值，即取最大的margin值。解决办法是在其中一个元素上加上clear: both。

<div class="container">
  <div class="box1"></div>
  <div class="box3"></div>
  <div class="box2"></div>
</div>

.container {
  margin: 20px;
  border: 1px solid #ccc;
  overflow: auto;
}

.box1 {
  float: left;
  width: 50%;
  height: 50px;
  margin-bottom: 20px;
  background-color: red;
}

.box2 {
  float: left;
  width: 50%;
  height: 50px;
  margin-top: 30px;
  background-color: blue;
}

.box3 {
  height: 0;
  overflow: hidden;
  visibility:hidden;
}

在上面的代码中，在<div>标签中的两个子元素<div class="box1">和<div class="box2">之间多了一个<div class="box3">元素，它的高度为0，并且它的overflow属性和visibility属性都设置为hidden。这个元素不占据任何空间，只是用来让<div>标签中的子元素避免margin边界叠加。