css盒子边距合并

在 CSS 中，我们经常需要为盒子设置边距（margin）。不过，在设置边距时，有一个需要注意的问题就是边距合并（margin collapsing）的问题。

.box {
  margin-top: 30px;
}
 

如上所示，设置了一个块级元素的上边距为 30 像素。但是，如果该元素的父元素也有边距，那么这两个边距可能会发生合并。边距合并的规则如下：

• 当相邻的两个盒子的上下边距都为正值时，它们的边距会合并为它们的最大值。
• 当相邻的两个盒子的上下边距中有一个为正值、一个为负值时，它们的边距会抵消，得出的值为两个边距的绝对值之和。
• 当相邻的两个盒子的上下边距都为负值时，它们的边距会合并为它们的最小值。

.container {
  margin-top: 20px;
  margin-bottom: -10px;
}
.box {
  margin-top: 30px;
}
 

如上所示，假设一个块级元素和其父元素同时设置了上边距，同时该元素的下边距为负值。这时，上下边距的合并方式如下：

• 该元素的上边距为 30 像素，父元素的上边距为 20 像素。它们都是正值，边距会合并为它们的最大值，即 30 像素。
• 该元素的下边距为 -10 像素，它是负值。父元素的上边距是正值，两个边距会抵消，计算出的值为 10 像素（两个边距的绝对值之和）。

因此，这个块级元素最终的上下边距为 30 像素 - 10 像素 = 20 像素。

边距的合并是 CSS 盒子模型的一个特性，使用时需要注意这个问题。如果想要避免边距合并，可以将元素设置为浮动（float）、绝对定位（absolute positioning）、内联块级元素（inline block）等方式。也可以使用 padding 来代替 margin 实现类似的效果。