margin重叠

Posted 2020-10-07 小目标

margin重叠

所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

margin重叠的情况

1、当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

2、当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

3、假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并，如果这个外边距遇到另一个元素的外边距，它还会发生合并。

外边距叠加的意义

外边距的叠加只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。设想，当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距叠加的存在，段落之间就不会产生双倍的距离。

防止外边距叠加

虽然外边距的叠加有其一定的意义，但有时候我们在设计上却不想让元素之间产生叠加，那么可以有如下几个建议可供参考：

1. 尽量使用padding来达到目的。

2.在可能叠加的外边距之间添加透明边框或者内边距使之分隔开。

3. 给元素添加上浮动(float)属性

4. 绝对定位