须知的css——margin不重叠的情形

margin重叠

摘自css2.1规范中文版

CSS中，两个或者多个盒（可能但不一定是兄弟）的相邻的margin会被结合成一个margin。Margin按这种方式结合叫重叠（collapse）
，产生的结合的margin叫做重叠margin。

margin重叠的计算规则

摘自css2.1规范中文版

当两个或者更多的margin合并时，产生的margin宽度为合并margin宽度中的最大值。至于负margin，就从正相邻margin的最大值中减去负相邻margin的绝对值的最大值。如果没有正margin，就用0减去相邻margin的绝对值的最大值

什么是相邻的margin

摘自css2.1规范中文版
两个margin是相邻的，当且仅当：

• 都属于流内块级盒，处于同一个块格式化上下文。
• 没有行盒（line box），没有空隙，没有padding并且没有border把它们隔开（注意，因此某些0高度行盒）
• 都属于竖直相邻盒边（vertically-adjacent box edges），即来自下列某一对：
  1.一个盒的top margin和它的第一个流内子级的top margin
  2.一个盒的bottom margin和它的下一个流内后面的兄弟（its next in-flow following sibling）的top margin
  3.最后一个流内子级的bottom margin和它的父级的bottom margin，如果父级的高度的计算值为'auto'
  4.一个盒的top和bottom margin，该盒没有建立一个新的块格式化上下文并且min-height的计算值为0，height的计算值为0或者'auto'，并且没有流内子级

如果一个margin的任何部分margin与另一个margin相邻的话，就认为它与那个margin相邻，是合并（collapsed）margin。

具体分析各个条件

1.都属于流内块级盒，处于同一个块格式化上下文。

什么是流内元素？如果一个元素是浮动的，绝对定位的或者是根元素，那么它就是流外元素。如果一个元素不是流外的，就叫流内元素。
流内块级盒，就是流内块级元素生成的一个盒。

结论1：根元素的盒子margin不会发生重叠（原因：根元素虽然是块级盒，但不是流内元素）。

举个🌰：根元素与body的margin不会重叠

 html {margin-top:10px;}
 body {margin-top:10px;}

事实：body距离视口顶部20px。

结论2: 任何浮动的、绝对定位的盒子不会与任何其他盒子的margin合并(原因：它们是流外块级盒）。

举个🌰：两个绝对定位的盒子，不会发生margin重叠。

<style>
    .div1 {
        width: 100px;
        height: 100px;
        position: absolute;
        background: red;
        margin-bottom: 10px;
        top: 0;
    }

    .div2 {
        width: 100px;
        height: 100px;
        position: absolute;
        background: yellow;
        margin-top: 10px;
        top: 100px;
    }
</style>
    <div class="div1"></div>
<div class="div2"></div>

在浏览器一看，咦，两个div间距刚好是10px,这不是发生margin重叠了吗？no,no,no。如果此时，改变其中一个div的margin值，都不会影响任何一个div的布局。通俗的讲就是，把绝对定位的盒子比作飞起来的盒子，那么这两个飞起来的盒子，一定处于不同高度，因此，不管这个盒子如何移动，都不会影响任何一个飞起来的盒子。

什么是格式化上下文？ 常规流中的盒属于一个格式化上下文，可能是块或是内联，但不能都是（既是块又是内联）。块级盒参与块格式化上下文。内联级盒参与内联格式化上下文 。

新建块级格式化上下文（BFC)的条件：

• 浮动元素，float除了none以外的值。
• 绝对定位元素，position(absolute,fixed)
• display 为以下其中之一的值 inline-blocks，table-cells，table-captions
• overflow 除了 visible 以外的值（hidden，auto，scroll）
• 注意："display:table" 本身并不产生 BFC，而是由它产生匿名框，匿名框中包含 "display:table-cell" 的框会产 BFC。

在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由margin属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并。

结论3：建立了新的块级格式化上下文的元素的margin不会与它们的流内子集合并。（原因：不在同一个块级格式化上下文）

举个🌰：overflow不为‘visible’的元素，不会与它的流内子级合并。

.father {
     width: 100px;
     height: 100px;
     background: red;
     margin-top: 10px;
 }
 .child {
     width: 50px;
     height: 50px;
     background: yellow;
     margin-top: 20px;
 }
<div class="father">
  <div class="child"></div>
</div>

这种情况是，father的overflow是‘visible'，发生了margin重叠，father向下偏移20px，如下图所示。

overflow不为‘visible’的元素，不会与它的流内子级合并

如果把father的overflow的值改为不是‘visible'的值，那么就不会发生margin重叠，如下图所示。

overflow不为‘visible’的元素，不会与它的流内子级合并

2.没有行盒（line box），没有空隙，没有padding并且没有border把它们隔开。

意思就是说，如果两个margin之间有东西隔着，它们并不是紧挨着一起，那么就不会发生margin重叠。

举个🌰：父元素有border，父子元素不会发生margin重叠。

  <style>
 .father{
     width: 100px;
     height: 100px;
     background: red;
     margin-top: 10px;
 }
 .child {
     width: 100px;
     height: 50px;
     background: yellow;
     margin-top: 20px;
 }
</style>

<div class="father">
<div class="child"></div>
</div>

这种情况是，父子元素margin没有被隔开的。因此，margin重叠了。如图所示：

父元素有border，父子元素不会发生margin重叠

如果给父元素顶部添加1像素的border，那么父子元素margin被边框隔离，此时不会发生margin重叠。如图所示：

父元素有border，父子元素不会发生margin重叠

此时child距离father顶部20px;

在举个例子：空div的margin自身重叠

  <style>
    .div1 {
        width: 100px;
        margin-top: 100px;
        margin-bottom: 100px;
    }
    .div2 {
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="div1">
</div>
<div class="div2"></div>

如果空div的上下margin没有隔开，就会发生重叠，如图所示：

空div的margin自身重叠

红色div向下偏离了100px,而不是200px,因为空div发生了margin重叠。如果给空div加上padding-top=10px,就不会发生margin重叠，如图所示：

空div的margin自身重叠

此时红色div向下偏移了210px(100+100+10)。

3.最后一个流内子级的bottom margin和它的父级的bottom margin，如果父级的高度的计算值为'auto'。

  <style>
    .father {
        width: 100px;
        margin-bottom: 100px;
    }
    .child {
        width: 100px;
        height: 100px;
        margin-bottom: 150px;
        background: red;
    }
    .sibling {
        width: 100px;
        height: 100px;
        background: yellow;
    }
</style>
<div class="father">
    <div class="child"></div>
</div>
<div class="sibling"></div>

此时father元素高度是auto,father的margin-bottom与child的margin-bottom,发生了重叠，因此，sibling距离father150px;
如图所示：

最后一个流内子级的bottom margin和它的父级的bottom margin，如果父级的高度的计算值为'auto'。

如果此时给father设置height：100px;那么father的margin-bottom就不会和child的margin-bottom发生重叠。此时sibling与father的垂直距离，只跟它们的margin值有关，与child的margin值无关。如图所示：

最后一个流内子级的bottom margin和它的父级的bottom margin，如果父级的高度的计算值为'auto'。

4.一个盒的top和bottom margin，该盒没有建立一个新的块格式化上下文并且min-height的计算值为0，height的计算值为0或者'auto'，并且没有流内子级。

   <style>
    .div1 {
        width: 100px;
        margin-top: 100px;
        margin-bottom: 100px;
    }

    .div2 {
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="div1">
</div>
<div class="div2"></div>

这种情况下，div1没有建立一个新的格式化上下文并且height:auto,也没有流内子级。div1自身div就重叠了,div2便宜100px。如图所示：

一个盒的top和bottom margin，该盒没有建立一个新的块格式化上下文并且min-height的计算值为0，height的计算值为0或者'auto'，并且没有流内子级。

如果将div1的overflow设置为’不为visible'的值，或添加流内子级<span>1</span>(不能是空标签，否则margin照样重叠），或添加height值。此时，margin都不会重叠。这个就不贴图片了。

总结

把margin重叠的条件分析了一遍，就得到了margin不重叠的情况。
我的总结是：只要两个margin被隔开了，就一定不会发生margin重叠。可以是上下border隔开，可以是被上下padding隔开，也可以是被高度隔开，可以是被流内子级隔开，可以被空隙（空隙的产生与clear有关）隔开，可以被新建立的格式化上下文隔开。
以下是css2.1规范的总结

• 一个浮动的盒与任何其它盒之间的margin不会合并（甚至一个浮动盒与它的流内子级之间也不会）
• 建立了新的块格式化上下文的元素（例如，浮动盒与overflow不为'visible'的元素）的margin不会与它们的流内子级合并
• 绝对定位的盒的margin不会合并（甚至与它们的流内子级也不会）
• 内联盒的margin不会合并（甚至与它们的流内子级也不会）
• 一个流内块级元素的bottom margin总会与它的下一个流内块级兄弟的top margin合并，除非兄弟有空隙
• 一个流内块级元素的top margin会与它的第一个流内块级子级的top margin合并，如果该元素没有top border，没有top padding并且该子级没有空隙
• 一个'height'为'auto'并且'min-height'为0的流内块级盒的bottom margin会与它的最后一个流内块级子级的bottom margin合并，如果该盒没有bottom padding并且没有bottom border并且子级的bottom margin不与有空隙的top margin合并
• 盒自身的margin也会合并，如果'min-height'属性为0，并且既没有top或者bottom border也没有top或者bottom padding，并且其'height'为0或者'auto'，并且不含行盒，并且其所有流内子级的margin（如果有的话）都合并了。
  如果盒的top和bottom margin相邻，那么可能会被彻底合并（collapse through）
  margin。此时，元素的位置取决于与其它margin被合并了的元素的关系
  如果该元素的margin与其父级的top margin合并了，盒的top border边被定义为与其父级的相同
  否则，要么该元素的父级没有参与margin合并，要么只涉及其父级的bottom margin。如果该元素的bottom border不为0的话，其top border边的位置将正常显示（the same as it would have been）。
  注意，已被彻底合并了的元素的位置不影响其它margin被合并的元素的位置，只有在布局这些元素的后代时，才需要top border边的位置。

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群
343599877，我们一起学前端！