margin 合并问题

什么是margin合并？

块级元素的上外边距（margin-top）和下边外距（margin-bottom）有时会合并为单个外边距，这样的现象称为“margin合并”。从此定义上，我们可以捕获以下两点重要信息：

1. 块级元素，但不包括浮动和绝对定位元素，尽管浮动和绝对定位可以让元素块状化。
2. 只发生在垂直方向上，严格来说，是只发生在和当前文档流方向的相垂直的方向上，由于默认文档流是水平方向的，所以发发生margin合并是垂直方向的。

margin合并的3种场景：

     (1)相邻的兄弟元素margin合并。

1. p { margin: 1em 0; }
   <p>第一行</p>
   <p>第二行</p>

   则第一行和第二行之间的间距还是1em，因为第一行的margin-bottom和第二行的margin-top合并在一起了，而不是上下相加。

    (2)父级和第一个/最后一个子元素。在默认状态下，下面的三种设置是等效的：

<div class="father">
    <div class="son" style="margin-top:80pxp;"></div>
</div>

<div class="father" style="margin-top:80pxp;">
    <div class="son"></div>
</div>

<div class="father" style="margin-top:80pxp;">
    <div class="son" style="margin-top:80pxp;"></div>
</div>

    (3)空块级元素的margin合并。

.father { overflow: hiddenp; }
.son { margin: 1em 0; }
<div class="father">
  <div class="son"></div>
</div>

    此时.father所在的这个父级<div>元素的高度仅仅为1em，因为.son这个空<div>元素的margin-top和margin-bottom合并在一起了。

margin合并的计算规则：

（1）正正取大指。

    如果是相邻兄弟合并：

.a { margin-bottom: 50px; }
.b { margin-top: 20px; }
<div class="a"></div>
<div class="b"></div>

此时，.a 和 .b 两个<div>之间的间距是50px,取最大那个值。

  如果是父子合并：

.father { margin-top: 20px; }
.son { margin-top: 50px; }
<div class = "father">
  <div class="son"><div/>
</div>

此时，.father元素等同于设置了margin-top:50px，取最大的那个值。

扫描二维码关注公众号，回复： 2187498 查看本文章

如果是自身合并：

.a { 
    margin-top: 20px;
    margin-bottom: 50px;
 }
<div class="a"></div>

此时，a元素的外部尺寸是50px，取最大的那个值。

（2）正负值相加。

 如果是相邻兄弟合并：

.a { margin-bottom: 50px; }
.b { margin-top: -20px; }
<div class="a"></div>
<div class="b"></div>

此时，.a 和 .b 两个<div>之间的间距是30px,是 -20px+50px 的值。

  如果是父子合并：

.father { margin-top: -20px; }
.son { margin-top: 50px; }
<div class = "father">
  <div class="son"><div/>
</div>

此时，.father元素等同于设置了margin-top:30px，是 -20px+50px 的值。

如果是自身合并：

.a { 
    margin-top: -20px;
    margin-bottom: 50px;
 }
<div class="a"></div>

此时，a元素的外部尺寸是30px，是 -20px+50px 的值。

（3）负负最负值。

  如果是相邻兄弟合并：

.a { margin-bottom: -50px; }
.b { margin-top: -20px; }
<div class="a"></div>
<div class="b"></div>

此时，.a 和 .b 两个<div>之间的间距是-50px,取绝对负值最大的值。

  如果是父子合并：

.father { margin-top: -20px; }
.son { margin-top: -50px; }
<div class = "father">
  <div class="son"><div/>
</div>

此时，.father元素等同于设置了margin-top:-50px，取绝对负值最大的值。

如果是自身合并：

.a { 
    margin-top: -20px;
    margin-bottom: -50px;
 }
<div class="a"></div>

此时，a元素的外部尺寸是50px，取绝对负值最大的值。