边距折叠是否在 x 轴上工作

CSS中的边距折叠是指相邻块级盒子的上下边距会合并成一个较大的边距，常常会引起一些问题。但是，边距折叠是在哪个方向上工作的呢？是在X轴还是在Y轴？

边距折叠的原理

在CSS中，相邻的块级盒子的margin会进行合并。边距折叠的原理如下：

1. 如果一个盒子的上下边距都是正数，那么它们会合并为一个较大的边距。
2. 如果一个盒子的上下边距有负数，而另一个盒子没有边框和填充，那么它们的边距也会合并成一个负数的边距。
3. 如果一个盒子的上下边距有负数，而另一个盒子有边框和填充，那么它们的边距会分别进行折叠并且不能是负值。

边距折叠是在Y轴上工作

根据上文的原理，我们可以得出结论：边距折叠是在Y轴上工作的。也就是说，在X轴上相邻盒子的margin不会进行合并。

如何避免边距折叠

为了避免边距折叠，可以采取以下方法：

1. 给一个盒子添加一个border属性或者padding属性。
2. 使一个盒子浮动。
3. 使用一个伪元素来清除margin折叠。

例如：

.box {
  overflow: hidden; /* 使用这个属性也可以防止边距折叠 */
}

.box:before, .box:after {
  content: "";
  display: table;
}

.box:after {
  clear: both;
}

总结

边距折叠是在Y轴上工作的，相邻块级盒子的上下margin会合并成一个较大的边距。为了避免边距折叠，可以给一个盒子添加一个border属性或者padding属性，使一个盒子浮动，或者使用一个伪元素来清除margin折叠。