css 之margin collapsing(外边距叠加)

为了给文档树中的各个元素排版定位（布局），浏览器会根据渲染模型为每个元素生成四个嵌套的矩形框， 分别称作 content box、padding box、border box 和 margin box，它们是不可分割的，并可能会重合， 这就是 CSS 规范中描述的“框模型”（box model）。

对于行内元素（例如 span），垂直方向的 margin和padding 不起作用。在某些情况下，margin会发生重叠现象。

margin collapsing

BFC（block formatting context）中相邻的两个块级盒，上一个box的下边距会跟下一个box的上边距发生叠加，即两者取最大的。外边距叠加与否完全取决于这两个块级box是否是位于同一BFC的两个相邻box，与水平垂直无关。可以更改了body的writing-mode，于是叠加发生在了水平方向（仅ie可看）

margin collapsing仅仅发生在BFC，不发生在IFC。

margin collapsing只针对普通流的概念，无法适用在float元素中。

margin collapsing可能跨元素。当一个box既没有border又没有padding时，它的第一个子box的的margin也能跟它的上一个容器的margin发生叠加

margin collapsing不能跟跨越BFC。当一个box在其内部创建新的BFC时(比如将该box的overflow设置为hidden)，跨元素折叠的情况也不会发生。