margin塌陷、margin重叠解决方案，你学会了吗？

最新推荐文章于 2024-02-04 08:39:10 发布

ostuthere

最新推荐文章于 2024-02-04 08:39:10 发布

阅读量2.9k

点赞数 12

分类专栏： CSS 文章标签：前端 css

本文链接：https://blog.csdn.net/qq_35727582/article/details/122189322

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

外边距合并

普通文档流中的块级元素在垂直方向，两个外边距相遇时会合并为一个外边距，合并后的外边距高度取两个合并的外边距高度中的较大值。行内元素、浮动元素以及绝对定位的元素之间不会发生外边距合并。外边距合并主要发生在父子关系以及相邻兄弟关系的块级元素之间，甚至空的块级元素也会发生外边距合并

父子元素之间（margin塌陷）

父子元素之间没有内边距或边框等其他内容隔开时，两个元素的上边距或下边距相遇会合并为一个外边距

<style>
#parent{
  margin: 20px auto;
}
.children{
  margin: 20px auto;
}
</style>

<div id="parent">
  <div class="children"></div>
</div>

在这里插入图片描述
如上图所示，因为父元素没有设置高度，子元素的上外边距与父元素的上外边距发生了合并，子元素的下外边距与父元素的下外边距发生了合并。

如何解决margin塌陷

1、给父元素设置边框或者内边距

通过给父元素设置 border 或 padding，将父子元素的 margin 隔开能避免发生合并，但是这一方法会改变我们想要的布局，多了我们或许不需要的 border 或者 padding

<style>
#parent{
  margin: 20px auto;
  boder: 1px solid transparent;
  padding: 1px;
}
.children{
  margin: 20px auto;
}
</style>

<div id="parent">
  <div class="children"></div>
</div>

在这里插入图片描述

2、激活父元素的BFC

通过激活父元素的 BFC 可以解决 margin 塌陷。激活 BFC 的方式有很多，所以可选的方法也有很多。关于BFC我有一篇专门的博客，放在末尾以供参考

<style>
#parent{
  margin: 20px auto;
  /* 方法一（文字较多时可能出现滚动条） */
  overflow: auto;
  /* 方法二（推荐使用） */
  display: flex;
}
.children{
  margin: 20px auto;
}
</style>

<div id="parent">
  <div class="children"></div>
</div>

在这里插入图片描述
如上图所示，在父元素激活了BFC之后，子元素的 margin 与父元素的 margin 都各自显示了

相邻兄弟元素之间（margin重叠）

两个相邻的兄弟元素之间的上下外边距相遇时也会发生合并

<style>
#box1{
  margin: 20px auto;
}
#box2{
  margin: 30px auto;
}
</style>

<div id="box1"></div>
<div id="box2"></div>

在这里插入图片描述
如上图所示，box1 与 box2 之间的距离本应该是 50px（20px + 30px），但是我们发现实际只有 30px，这两个相邻盒子的垂直外边距重叠了，且取了两者的较大值

如何解决margin重叠

1、只给一个元素设置外边距

想让两个兄弟元素隔开，可以只给其中一个元素设置我们想要的外边距

2、将一个元素放入BFC中

可以将其中一个元素放入 BFC 中，但是这样会改变文档结构

<style>
#bfc {
  overflow: auto;
}
#box1{
  margin: 20px auto;
}
#box2{
  margin: 30px auto;
}
</style>
<div id="bfc">
  <div id="box1"></div>
</div>
<div id="box2"></div>

在这里插入图片描述
如上图所示，其实也是利用了父子元素解决 margin 塌陷的办法，将 box1 放入一个 BFC 之后，box1 与 box2 的 margin 被隔开了

空元素

一个空元素没有设置内边距或边框时，它的上下外边距相遇会合并为一个外边距
在这里插入图片描述
另一个元素的外边距与这个空元素的外边距相遇时，还会合并为一个外边距

补充

外边距合并实际上也是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了

在这里插入图片描述
BFC具体细节可以参考文章
https://blog.csdn.net/qq_35727582/article/details/116156095