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

一. 边距合并的场景

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

二. 实例剖析

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>

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

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

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

这就是相邻元素合并，最后合并的值是『两者中外边距中较大的那个(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>

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

由以上得出结论：父元素合并，取父子中『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>

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

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

元素自身边距合并

---

三. 如何取消合并

1️⃣

• 设置border或者padding
• BFC

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

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

2️⃣

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

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

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

---

参考

外边距合并
MDN-边距合并

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

原著是一个有趣的人,若有侵权,请通知删除