Margincollapsing是指两个或多个相邻的边距（margins）会合并为一个margin。本文详细介绍了CSSmargincollapsing的实现。分为3种情况，非常实用。需要的朋友可以参考上一篇文章。这是一个经典的老问题，因为之前有读者朋友问过，顺便整理一下。让我们从一个简单的例子开始：`<``style``>``.slide1div{``margin:10px0;``}````<``div``class``=``"slide1"``>``<``h3``>第一种边距塌陷：兄弟元素``<``p``>文字间距10px``<``p``>文字间距10px```看这个例子中的两个Ap标签，根据到样式定义：第一个p的margin-bottom和第二个p的margin-top都是10px，所以实际距离应该是20px，但是用浏览器查看可以发现最终边缘间距为10px。这方面的一个例子是边距折叠：块级元素的顶部和底部边距有时会合并（或折叠）为一个边距。分类情况margincollapsing有3种基本情况：相邻元素父元素和第一个子元素（或者最后一个子元素，后面记得在这里思考为什么是第一个或者最后一个）空块级元素不在一个赶紧记住。首先，前面的例子是两个相邻元素之间的第一个case-margincollapse。第二种和第三种情况如下：`<``style``>``.father{``background-color:green;``}``.child{``margin-top:50px;``background-color:red;``height:300px;``}``.slide3{``margin:10px0;``}````<``h3``>SecondMargincollapse:parentandfirstchild``<``div``class``=``"slide2father"``>````<``div``class``=``"slide2child"``>````````<``h3``>第三边距折叠：空块级元素``<``div``class``=``"slide3"``>` }//欢迎加入全栈开发交流的划桨交流圈：582735936 ]//划桨1-3年的前端人员 }//帮助突破划水瓶颈，提升思维能力他们的形象也如图：案例2：子元素的外边距会被“转移”到父元素的外面案例3：上边距和下边距的元素会被折叠起来，这里我们不妨看看这几种情况的共同点（推荐画他们的盒子模型，我懒得画了-_-），我们可以找到共同点marginfolding原因：直接marginContact，没有barrier。如何理解直接接触？很简单：在第一个例子中，两个
标签的垂直边距是直接接触的；在第二个例子中，由于父元素的padding和border都是0，所以margin和它的子元素也是直接联系的。（这个例子中的盒子模型很容易理解。）第三个例子中，空元素本身的上下边距也是直接接触的（padding，border也为0）。如何计算各种情况下的foldedmargin？，这很容易验证：如果两个边距都是正的，折叠后的边距会更大。如果两个边距为正负，则折叠后的边距将为边距之和。如果两者的边距都是负数，折叠后的边距是较小的边距之和。如何防止边距塌陷如上所述，边距塌陷的原因是边距直接接触。因此，防止折叠的方法就是阻断这种直接接触，组合方式包括：在嵌套情况下，只要borderpadding不为0，或者用行内元素隔开，比如在父元素上加一行文字也是可以的（可以直接试试case2）任何借助bfc形成barrier的方式，比如floating，display:table等（不熟悉BFC的同学先看看，后面再补充）。综上，我要补充一点，上面讨论的是基本情况，也可以在基本情况下进行组合，比如多个相邻元素之间；层子孙元素嵌套等，了解基本原理，其他情况只要写个小demo验证一下就很容易理解了。然后是实践：内容有错误请指出（看不懂难受，抱怨也没关系）；以上就是本文的全部内容，希望对大家的学习有所帮助，