如何禁用父子之间的边距折叠 - CSS

在CSS中，两个相邻的边距会发生合并（折叠），其结果是两个相邻元素之间的边距等于它们的边距之间的最大值。而在父子关系的元素之间，这种折叠通常是不需要的。因此，在某些情况下，禁止这种行为可能是非常有必要的。

有几种方法可以禁用父子元素之间的边距折叠：

1. 使用padding代替margin

在一些情况下，我们可以使用padding来代替margin。padding不会折叠，因此可以用来控制元素的间距。

.parent {
  padding: 10px;
}

.child {
  margin: 10px 0;
}

2. 使用border代替margin

另一种方法是使用border代替margin。由于border不存在边距折叠问题，因此用border来控制元素的间距是一个很好的选择。

.parent {
  border: 10px solid transparent;
}

.child {
  margin: 10px 0;
}

3. 将父元素设置为inline-block

如果父元素设置为inline-block，那么它将不再支持上下margin的合并。因此，这种方法可以禁止父子元素之间的边距折叠。

.parent {
  display: inline-block;
}

.child {
  margin: 10px 0;
}

以上三种方法均可以禁用父子元素之间的边距折叠，具体使用哪种方法要根据具体情况进行选择。

参考文献：

• CSS margin collapsing
• CSS box model