css解决外边距塌陷

CSS中的外边距塌陷（Margin Collapse）是指两个相邻的块级元素，如果它们之间只有空白（比如行内元素、内边距或者没有内容），那么它们的上外边距和下外边距可能会合并在一起，导致实际间距小于预期。这种现象通常发生在没有明确设置`margin-bottom`和`margin-top`的情况。

要解决这个问题，可以采取以下几种策略：

1. **添加非空内容**：给相邻的元素添加一些非空的内容，如浮动元素、` `占位符字符或伪元素（`:before`或`:after`），这会阻止外边距的塌陷。

.parent {
  position: relative;
}
.child {
  margin-top: 10px;
  &::before {
    content: "";
    display: block;
    height: 0;
    clear: both;
  }
}

2. **设定`border`或`padding`**：为元素添加一些边框或填充值，也可以防止塌陷。

.parent {
  border-bottom: 1px solid #ccc;
}

3. **使用`box-sizing`属性**：将元素的`box-sizing`属性设置为`border-box`，这样计算宽度时会包含边框和内边距，从而避免了塌陷。

.child {
  box-sizing: border-box;
  margin-top: 10px;
}

4. **使用负`margin`**：有时通过设置负上外边距，可以达到类似的效果，但这不是推荐的做法，因为可能会引入其他复杂性。

记住，现代浏览器默认已经优化了对这种边缘情况的处理，但在某些特定场景下还是需要开发者注意并手动调整样式。