摘要：即我们常说的脱离文档流的元素。如果一个元素不是流外的，即仍在文档流中的元素，就叫流内元素。两个兄弟盒之间的竖直距离由属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直会合并。如果盒的和相邻，那么可能会被彻底合并。
1.首先，了解一些词汇
- 流内元素?
如果一个元素是浮动的，绝对定位的或者是根元素，那么它就是流外元素。即我们常说的脱离文档流的元素。如果一个元素不是流外的，即仍在文档流中的元素，就叫流内元素。
- 流内块级盒?
流内块级盒，就是流内块级元素生成的一个盒。
- 什么是格式化上下文？
常规流中的盒属于一个格式化上下文，可能是块或是内联，但不能都是（既是块又是内联）。块级盒参与块格式化上下文。内联级盒参与内联格式化上下文 。在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由margin属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并。
新建块级格式化上下文（BFC)的条件：
浮动元素，float除了none以外的值。
绝对定位元素，position(absolute,fixed)
display 为以下其中之一的值 inline-blocks，table-cells，table-captions
overflow 除了 visible 以外的值（hidden，auto，scroll）
注意："display:table" 本身并不产生 BFC，而是由它产生匿名框，匿名框中包含 "display:table-cell" 的框会产 BFC。
- 行盒（line box）
在一个行内格式化上下文中，盒是一个接一个水平放置的，从包含块的顶部开始。这些盒之间的水平margin，border和padding都有效。盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐。包含来自同一行的盒的矩形区域叫做行盒
- 相邻的margin?
两个margin是相邻的，当且仅当：
都属于流内块级盒，处于同一个块格式化上下文。
没有行盒（line box），没有空隙，没有padding并且没有border把它们隔开（注意，因此某些0高度行盒）
都属于竖直相邻盒边（vertically-adjacent box edges），即来自下列某一对：
* 一个盒的top margin和它的第一个流内子级的top margin * 一个盒的bottom margin和它的下一个流内后面的兄弟（its next in-flow following sibling）的top margin * 最后一个流内子级的bottom margin和它的父级的bottom margin，如果父级的高度的计算值为"auto" * 一个盒的top和bottom margin，该盒没有建立一个新的块格式化上下文并且min-height的计算值为0，height的计算值为0或者"auto"，并且没有流内子级
如果一个margin的任何部分margin与另一个margin相邻的话，就认为它与那个margin相邻，是合并（collapsed）margin。
2.什么是margin合并（重叠）在CSS中，两个或者多个盒（可能但不一定是兄弟）的相邻的margin会被结合成一个margin。Margin按这种方式结合叫合并（collapse），产生的结合的margin叫做合并margin。
3.合并的规则
相邻的竖直margin会合并，除了：
根元素的盒的margin不合并
如果一个有空隙（clearance）的元素的top和bottom margin是相邻的，它的margin会与紧跟着的兄弟的相邻margin合并，但产生的margin不会与父级块的bottom margin合并
水平margin不会合并
当两个或者更多的margin合并时，产生的margin宽度为合并margin宽度中的最大值。
至于负margin，就从正相邻margin的最大值中减去负相邻margin的绝对值的最大值。
如果没有正margin，就用0减去相邻margin的绝对值的最大值
4.总结所以综上所述，只要两个margin被隔开了，就一定不会发生margin重叠。可以是上下border隔开，可以是被上下padding隔开，也可以是被高度隔开，可以是被流内子级隔开，可以被空隙（空隙的产生与clear有关）隔开，可以被新建立的格式化上下文隔开。
以下是css2.1规范的总结
一个浮动的盒与任何其它盒之间的margin不会合并（甚至一个浮动盒与它的流内子级之间也不会）任何浮动的、绝对定位的盒子不会与任何其他盒子的margin合并(原因：它们是流外块级盒）。
建立了新的块格式化上下文的元素（例如，浮动盒与overflow不为"visible"的元素）的margin不会与它们的流内子级合并。（原因：不在同一个块级格式化上下文）
绝对定位的盒的margin不会合并（甚至与它们的流内子级也不会）把绝对定位的盒子比作飞起来的盒子，那么这两个飞起来的盒子，一定处于不同高度，因此，不管这个盒子如何移动，都不会影响任何一个飞起来的盒子。
内联盒的margin不会合并（甚至与它们的流内子级也不会）
一个流内块级元素的bottom margin总会与它的下一个流内块级兄弟的top margin合并，除非兄弟有空隙
一个流内块级元素的top margin会与它的第一个流内块级子级的top margin合并，如果该元素没有top border，没有top padding并且该子级没有空隙
一个"height"为"auto"并且"min-height"为0的流内块级盒的bottom margin会与它的最后一个流内块级子级的bottom margin合并，如果该盒没有bottom padding并且没有bottom border并且子级的bottom margin不与有空隙的top margin合并
盒自身的margin也会合并，如果"min-height"属性为0，并且既没有top或者bottom border也没有top或者bottom padding，并且其"height"为0或者"auto"，并且不含行盒，并且其所有流内子级的margin（如果有的话）都合并了。
如果盒的top和bottom margin相邻，那么可能会被彻底合并（collapse through）
margin。此时，元素的位置取决于与其它margin被合并了的元素的关系
如果该元素的margin与其父级的top margin合并了，盒的top border边被定义为与其父级的相同
否则，要么该元素的父级没有参与margin合并，要么只涉及其父级的bottom margin。如果该元素的bottom border不为0的话，其top border边的位置将正常显示（the same as it would have been）。
注意，已被彻底合并了的元素的位置不影响其它margin被合并的元素的位置，只有在布局这些元素的后代时，才需要top border边的位置。
整理自css2.1规范：[http://www.ayqy.net/doc/css2-...]
以及：[http://www.jianshu.com/p/52a2...]
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112708.html
摘要：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 首先看下W3C对于外边距合并的介绍： 外边距合并...
摘要：如图为了方便大家理解和尝试，我写了一个小放上来方便大家尝试显示盒模型盒模型计算规则元素框的总宽度元素的的左边距和右边距的值的左边距和右边距的值的左右宽度元素框的总高度元素的的上下边距的值的上下边距的值的上下宽度。今天突然看到一篇关于CSS中盒模型的文章，忽然觉得自己竟然遗忘了很多小的地方，所以写一篇文章来记忆一下 （摘抄于千与千寻写的CSS盒子模型理解，并在自己基础上添加了一些东西，希望更完...
摘要：实际内容盒子的内容，显示文本和图像。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。在入门时学的盒模型这个练习对盒模型的熟练运用有帮助由个盒组成代码如下五环之歌 五环之歌HTML5盒模型练习 html任何一个元素都可以看作一个盒子，这个盒子不可见，但是它存在于页面的每个角落，也正是由于它不可见、不直观，很多人在初学CSS的时候不能透彻得理解盒模型的概念，导致在页面布局中出...
摘要：实际内容盒子的内容，显示文本和图像。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。在入门时学的盒模型这个练习对盒模型的熟练运用有帮助由个盒组成代码如下五环之歌 五环之歌HTML5盒模型练习 html任何一个元素都可以看作一个盒子，这个盒子不可见，但是它存在于页面的每个角落，也正是由于它不可见、不直观，很多人在初学CSS的时候不能透彻得理解盒模型的概念，导致在页面布局中出...
阅读 1026·2023-04-26 02:26
阅读 2133·2021-09-26 10:16
阅读 1542·2019-08-30 12:57
阅读 3459·2019-08-29 16:10
阅读 3213·2019-08-29 13:47
阅读 1180·2019-08-29 13:12
阅读 2133·2019-08-29 11:11
阅读 1330·2019-08-26 13:28
