CSS内外边距折叠合并导致div高度异常？如何解决？

CSS中的内外边距折叠（Margin Collapse）是浏览器在处理相邻元素的外边距时的一种行为。当两个垂直相邻的元素的外边距接触时，它们的外边距会合并为一个外边距，这个外边距的大小是两者中较大的那个。这种行为有时会导致div的高度异常，尤其是在嵌套的div中。

问题示例

<div class="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
</div>

.parent {
  background-color: lightgray;
}

.child {
  margin: 20px;
  background-color: lightblue;
}

在这个例子中，.child元素之间的外边距会合并，导致.parent的高度比预期的要小。

解决方法

1. 使用padding代替margin： 如果你希望元素之间有间距，可以使用padding而不是margin。padding不会发生外边距折叠。

   .child {
    padding: 20px;
    background-color: lightblue;
   }
   

2. 使用border或padding来阻止外边距折叠： 在外边距折叠的元素之间添加border或padding可以阻止外边距折叠。

   .parent {
    background-color: lightgray;
    padding: 1px; /* 或者 border: 1px solid transparent; */
   }
   

3. 使用overflow属性： 将父元素的overflow属性设置为auto或hidden可以阻止外边距折叠。

   .parent {
    background-color: lightgray;
    overflow: auto; /* 或者 overflow: hidden; */
   }
   

4. 使用flexbox或grid布局： 使用flexbox或grid布局可以避免外边距折叠的问题。

   .parent {
    background-color: lightgray;
    display: flex;
    flex-direction: column;
   }
   

5. 使用::before或::after伪元素： 在父元素中添加一个伪元素，并设置display: table;，这样可以阻止外边距折叠。

   .parent::before {
    content: '';
    display: table;
   }
   

总结

CSS外边距折叠是一个常见的现象，尤其是在垂直方向上。通过使用padding、border、overflow、flexbox或grid布局等方法，可以有效地避免外边距折叠带来的问题，确保div的高度符合预期。