摘要：两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。两个外边距一正一负时，折叠结果是两者的相加的和。
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个多带带的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
1. 折叠的结果两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
2. 条件产生折叠的必备条件：margin必须是邻接的
而根据w3c规范，两个margin是邻接的必须满足以下条件：
必须是处于常规文档流（非float和绝对定位）的块级盒子，并且处于同一个BFC当中。
没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开
都属于垂直方向上相邻的外边距，可以是下面任意一种情况
元素的margin-top与其第一个常规文档流的子元素的margin-top
元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom
2.1 条件解读创建了新的BFC的元素（例如浮动元素或者"overflow"值为"visible"以外的元素）与它的子元素的外边距不会折叠
浮动元素不与任何元素的外边距产生折叠（包括其父元素和子元素）
绝对定位元素不与任何元素的外边距产生折叠
inline-block元素不与任何元素的外边距产生折叠
一个常规文档流元素的margin-bottom与它下一个常规文档流的兄弟元素的margin-top会产生折叠，除非它们之间存在间隙（clearance）。
一个常规文档流元素的margin-top 与其第一个常规文档流的子元素的margin-top产生折叠，条件为父元素不包含 padding 和 border ，子元素不包含 clearance。
一个 "height:auto" 并且 "min-height:0"的常规文档流元素的 margin-bottom 会与其最后一个常规文档流子元素的 margin-bottom 折叠，条件为父元素不包含 padding 和 border ，子元素的 margin-bottom 不与包含 clearance 的 margin-top 折叠。
一个不包含border-top、border-bottom、padding-top、padding-bottom的常规文档流元素，并且其 "height" 为 0 或 "auto"， "min-height:0"，其里面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 会折叠。
注意：
浮动元素和绝对定位元素不与其他盒子产生外边距折叠是因为元素会脱离当前的文档流，违反了上面所述的两个margin是邻接的条件同时，又因为浮动和绝对定位会使元素为它的内容创建新的BFC，因此该元素和子元素所处的BFC是不相同的，因此也不会产生margin的折叠。
但是浮动元素脱离了当前的BFC并不影响它后面的兄弟元素，后面的兄弟元素与浮动元素前面的元素依然在同一个BFC当中，所以，它们之间的margin还是会折叠的。
2.2 空隙 clearance当浮动元素之后的元素设置clear以闭合相关方向的浮动时，根据w3c规范规定，闭合浮动的元素会在其margin-top以上产生一定的空隙（clearance），该空隙会阻止元素margin-top的折叠，并作为间距存在于元素的margin-top的上方。关于这个间距的计算稍微有点复杂，但实际工作中你并不需要去计算它。
3. 如何解决使用BFC解决margin合并问题可以参考这篇文章：CSS中重要的BFC
3.1 自身margin合并的情况加个padding或者border-top/border-bottom
3.2 相邻元素的情况相邻元素中间添加一个1px的间隔元素(不推介，因为添加了冗余标签)
相邻元素加上display: inline-block; 或者grid与inline-grid后相邻元素之间的垂直外边距不会合并，不过注意grid的浏览器兼容性不太好。
相邻元素可以在其中一个元素外面包一层div，并设置任何能触发BFC的属性即可。codepen的DEMO
浮动与绝对定位之类脱离文档流的元素不发生margin合并
3.3 父子元素的情况给父元素添加padding-top值，缺点：增加了一点padding的误差
给父元素添加border值，比如border-top:1px solid transparent;，缺点同上
给父元素或者子元素声明浮动float，缺点：float有时是不必要的。
使父元素或子元素声明为绝对定位：position:absolute/fixed;
给父元素添加属性 overflow:auto/auto/scroll;
子元素的margin使用父元素的padding代替
网上的帖子大多深浅不一，甚至有些前后矛盾，在下的文章都是学习过程中的总结，如果发现错误，欢迎留言指出~
参考：
CSS外边距合并的问题
深入理解css中的margin属性
深入理解BFC和Margin Collapse
PS：欢迎大家关注我的公众号【前端下午茶】，一起加油吧~
另外可以加入「前端下午茶交流群」微信群，长按识别下面二维码即可加我好友，备注加群，我拉你入群～
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115788.html
深入css布局(3) — margin问题与格式化上下文 在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们来深入学习一下css布局相关的知识。 css布局篇已经讲个2篇了，前面我们深入讲解了 盒模型与box-sizing, 元素分类，行框，定位与浮动等知识点。今天呢，我们把css布局篇做一个结尾，最后...
摘要：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 首先看下W3C对于外边距合并的介绍： 外边距合并...
摘要：盒子模型我们把布局里面的所有东西都可以想象成一个盒子，盒子里面又装着小盒子，小盒子里面又装着小小盒子所以布局的万物基于盒子。虽然外边距是不可见的，但是我们算元素的总宽度或者总高度的时候，要加上外边距。 盒子模型 我们把布局里面的所有东西都可以想象成一个盒子，盒子里面又装着小盒子，小盒子里面又装着小小盒子......所以布局的万物基于盒子。即使一个小小的元素p，也可以把它抽象成为一个盒子...
摘要：盒子模型我们把布局里面的所有东西都可以想象成一个盒子，盒子里面又装着小盒子，小盒子里面又装着小小盒子所以布局的万物基于盒子。虽然外边距是不可见的，但是我们算元素的总宽度或者总高度的时候，要加上外边距。 盒子模型 我们把布局里面的所有东西都可以想象成一个盒子，盒子里面又装着小盒子，小盒子里面又装着小小盒子......所以布局的万物基于盒子。即使一个小小的元素p，也可以把它抽象成为一个盒子...
摘要：的特性始终是透明的。例如就等于如果只有两个值，第一个值表示上下值，第二个值为左右的值。垂直外边距合并问题外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 Margin的特性 margin始终是透明的。 margin通过使用单独的属性，可以对上、右、下、左的外边距进行设置。即：margin-top、marg...
阅读 3355·2023-04-25 22:04
阅读 2169·2021-11-22 15:29
阅读 2095·2021-10-11 10:57
阅读 1362·2021-09-24 09:48
阅读 3127·2021-09-09 09:34
阅读 2518·2021-09-02 15:21
阅读 2367·2019-08-30 15:53
阅读 1067·2019-08-30 14:07
