什么是外边距重叠，重叠的结果是什么？

 

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【什么是外边距重叠，重叠的结果是什么？ 】

1.什么是外边距重叠？

    外边距重叠指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的高度如果都是正边界，边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。只有外边距才可以是负值，内边距不允许为负值。

2.外边距重叠的图示：

    当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生合并。

   当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的顶和底边界也发生合并：

    假设有一个空元素，它有边界，但是没有边框或填充。在这种情况下，顶边界与底边界就碰到了一起，它们会发生叠加：

3.外边距重叠的作用。

    当我们上下排列一系列规则的块级元素时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离，这样各处距离就一致了。

4.外边距不重叠的情况。

    水平margin永远不会重合

    设置了overflow属性(visible除外)的元素和它的子元素之间的margin不会重叠

    设置了绝对定位（position:absolute）的盒模型，垂直margin不会被重叠，和子元素之间也不重叠

    设置了display:inline-block的元素，垂直margin不会重叠，和子元素之间也不重叠

    根元素(如html)与body的margin不会重叠

5.防止外边距重叠的方法。

    元素绝对定位postion:absolute;一般用在内层元素

    内层元素 加float:left;或display:inline-block;

    外层元素用padding增加边距

    外层元素设置overflow:hidden;

    内层元素透明边框border:1px solid transparent;

6.参考文献

CSS外边距(margin)重叠及防止方法

CSS中margin边界叠加问题及解决方案

CSS2速查表- BFC与边距重叠详解