外边距合并

1. 常见外边距合并的类型

（1）普通文档流里垂直相邻的兄弟块级元素边距合并。
（2）父容器的上边距与第一个子元素margin合并，下边距与最后一个子元素margin合并。
（3）空元素上下margin合并为。

---

2. 合并后margin的计算

• 正正margin合并为最大值，如图中box1和box2之间的间隙为box1和box2外边距的最大值40px，父容器的上外边距为box1的值40px，父容器下边距的值为box2的外边距20px.
  .box{background:pink;}
  .box1{border:1px solid blue;width: 100px;height: 100px; margin:40px;}
  .box2{border:1px solid red;width: 100px;height: 100px; margin:20px;}
  .box3{ border:1px solid; }
  .clear:after{ content:''; clear:both; display:block;}

     
          
  
              
  box1
   
  box2
          
          
   我是box3
    
  

11-1.jpg

---

• 负负外边距合并为最负值，例如-20px和-10px合并时取-20px。如图box1的margin为-10px，box2的margin为-20px，box1和box2合并后margin为-20px。
  .box{background:pink;}
  .box1{border:10px solid blue;width: 100px;height: 100px; margin:-10px;}
  .box2{border:10px solid red;width: 100px;height: 100px; margin:-20px;}
  .box3{ border:1px solid; }
  .clear:after{ content:''; clear:both; display:block;}

11-2.jpg

---

• 一正一负则相加。例如10px和-20px相加后为-10px。如图box1的上margin与父容器都为正，合并为10px；box1和box2一正一负合并为-10px；box2下margin与父容器合并为-10px。
  .box{background:pink;margin:10px;}
  .box1{border:10px solid blue;width: 100px;height: 100px;margin:10px;}
  .box2{border:10px solid red;width: 100px;height: 100px; margin:-20px;}
  .box3{ border:1px solid; }
  .clear:after{ content:''; clear:both; display:block;}
  
  

  11-3.jpg

---

• 空元素上下margin自动合并成一个外边距。box2上下margin合并到了一起，只有50px。
  .box{background:pink;margin:10px;}
  .box1{border:1px solid blue;margin:10px;}
  .box2{margin:50px;}
  .box3{ border:1px solid; }
  
  

  11-4.jpg

---

3. 父子外边距合并的解决方法：

（1） 给父容器加上边框。
（2） 给父容器加上padding。
（3）触发父容器的BFC，触发方式有：

• 设置浮动
• position:absolute或fixed
• overflow不是visibility
• display：inline或inline-block或tablecell、table-caption

另外BFC容器还可以包含浮动元素，也就是说容器中的子元素都设置浮动时，容器的高度也不会塌陷。

    如：.box{background:pink;
           /* border: 1px solid transparent; */
         padding:1px;}

效果如图：

边距2.jpg

４.　相邻兄弟元素外边距合并解决方法：

   1. 浮动元素、绝对定位元素和inline-block不会产生外边距合并。
   给box2添加display：inline-block后上下两个元素边距没有合并了。

边距3.jpg

2. 将这两个相邻块级元素中的一个放入一个容器中，并且给这个容器设置边框或者触发容器的BFC。
如图，把box1放入容器ct里面，ct设置了透明边框后，box1和box2的外边距没有合并了

边距4.jpg

介于上下margin合并这个问题，在布局时最好只设置一边的margin，如margin-top或margin-bottom。