什么是外边距合并?

243 阅读2分钟

外边距合并(Margin collapsing)是CSS中的一种现象,指的是当两个(或更多)相邻的块级元素的垂直外边距相遇时,它们的外边距会合并成一个较大的外边距。

外边距合并的规则如下:

  1. 相邻的兄弟元素:如果两个相邻的兄弟元素之间没有任何内容(如文本、行内元素等)或者边界(如边框、填充等)来分隔它们,那么它们的上下外边距会合并成一个外边距。合并后的外边距的大小取两个外边距中较大的那个。

  2. 父元素和第一个/最后一个子元素:如果父元素的上边距或下边距与第一个子元素的上边距或最后一个子元素的下边距相遇,那么它们的外边距会合并成一个外边距。合并后的外边距的大小取两个外边距中较大的那个。

  3. 空的块级元素:如果一个块级元素没有任何内容(如文本、行内元素等),并且没有边界(如边框、填充等),那么它的上下外边距会合并成一个外边距。

外边距合并可以产生一些意外的效果,例如两个元素之间的间距比预期的要大。为了避免外边距合并,可以采取以下方法:

  1. 使用内边距(padding)或边框(border)来分隔元素,阻止外边距合并。

  2. 使用浮动(float)、定位(position)或者flex布局等方式来创建新的BFC(块级格式化上下文),BFC可以阻止外边距合并。

  3. 使用overflow: hidden或者display: inline-block等方式触发元素的BFC,同样可以阻止外边距合并。