关于边距合并其实不难理解，但还是写一篇博客记录一下。

一. 边距合并的场景

• 相邻元素合并
• 父子合并
• 自己合并

二. 实例剖析

1️⃣. 相邻元素合并

/* css */
   /* 相邻元素边距合并1 */
   body {
     margin: 0;
   }
   .first {
     margin-left: 60px;
     height: 100px;
     width: 200px;
     background-color: red;
     margin-bottom: 30px;
   }
   .second {
 /*  margin-top: 60px; */   
     height: 100px;
     width: 200px;
     background-color: green;
   }
<!-- html -->
 <div class="first">相邻元素边距合并1</div>
 <div class="second">相邻元素边距合并2</div>

相邻元素合并.png

为了防止干扰，先设置body的margin为0,这时候可以看到div.first的下边距就是设置好的下margin，div.second没有设置上margin,两者之间的边距就是30px；
把div.second已经注释的边距代码还原

.second {
      height: 100px;
      margin-top: 60px; 
      width: 200px;
      background-color: green;
    }

相邻元素合并-1.png

这就是相邻元素合并，最后合并的值是『两者中外边距中较大的那个(margin的值不是负数)』

相邻元素合并代码

2️⃣. 父子合并

    /* 父子元素合并css */
    .father {
        width: 200px;
        background-color: red;     
     }
    .son {
        background-color: green;    
        height: 100px;
        width: 200px;
    }
  <!-- html -->
  <div class="father">
    <div class="son">
父子合并
    </div>
  </div>

父子外边距合并.png

父子外边距合并-1.png

由以上得出结论：父元素合并，取父子中『margin较大的那个值』

父子元素合并代码

3️⃣. 自己合并

  /* 自己合并css */
.self1 {
       background-color: red; 
    }
.self3 {
     background-color: green; 
    }
 <!-- html -->
 <div class="self1">自己合并1</div>
 <div class="self2"></div>
 <div class="self3">自己合并3</div>

元素自身边距合并.png

元素自身边距合并-1.png

空元素自身margin合并，取margin-top与margin-bottom之间『较大』的一个值

元素自身边距合并

三. 如何取消合并

1️⃣

• 设置border或者padding
• BFC

以上例父子元素取消合并为例：

给父亲添加overflow: hidden;形成bfc(包括其他可以构成BFC的方式)
或是设置给父元素padding-top: 1px;或是border-top: 1px solid transparent;
阻止父子元素外边距合并

取消父子元素的外边距合并.png

2️⃣

BFC并不能阻止相邻元素边距的合并

border padding overflow: hidden阻止相邻元素合并不成功
相邻元素设置「padding」或是、「border」以及『overflow:hidden;』都不能阻止合并。(都设置为浮动，然后清除浮动可以达到目的，太麻烦了),因为border或是padding相当于『墙』，margin是墙外因素，会阻止父子margin合并但是***相邻元素的外边距合并****不会干预。

对于相邻元素有时候最好用一个方向的margin，要么全部margin-top 要不都 margin-bottom。对于overflow:hidden;或是其他方式形成的 BFC极力不推荐使用，会带来其它副作用，得不偿失

参考

外边距合并
MDN-边距合并

版权声明：本文为博主原创文章，未经博主许可不得转