CSS外边距合并

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

一. 边距合并的场景

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

二. 实例剖析

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;
   }

 相邻元素边距合并1
 相邻元素边距合并2

相邻元素合并.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

以我们之前前设置的第一个div的margin-left: 60px;做参照可以明显的看出，合并之后的边距是60px(即为第二个div的边距)，而不是我们认为的90px,

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

相邻元素合并代码

2️⃣. 父子合并

    /* 父子元素合并css */
    .father {
        width: 200px;
        background-color: red;     
     }
    .son {
        background-color: green;    
        height: 100px;
        width: 200px;
    }
  
  
    
父子合并

父子外边距合并.png

这时给后代元素加一个margin-top: 50px;给父元素加一个margin-top: 10px为了便于观察给子元素加一个 opacity: .4;
合并之后的边距还是50px

父子外边距合并-1.png

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

父子元素合并代码

3️⃣. 自己合并

  /* 自己合并css */
.self1 {
       background-color: red; 
    }
.self3 {
     background-color: green; 
    }
 
 自己合并1
 
 自己合并3

元素自身边距合并.png

第二个元素没有加入内容，视觉上相当于不存在一样。当给div.self添加margin: 30px;

元素自身边距合并-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-边距合并