也说说外边距折叠

Posted 2020-09-09

最开始学前端就听过“外边距折叠”这一专业名词，可是什么条件下会发生外边距折叠，后来有了说法，叫“只有处于同一个BFC的外边距会发生折叠（什么是BFC不在这节做讨论）”，那是不是只有这一种条件下外边距才不折叠呢？

研究css2.2中的box model关于Collapsing margins的讲解。

标准中，对外边距折叠是这么说的：

Adjoining vertical margins collapse, except:

• Margins of the root element‘s box do not collapse.
• If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.
• If the top margin of a box with non-zero computed ‘min-height‘ and ‘auto‘ computed ‘height‘ collapses with the bottom margin of its last in-flow child, then the child‘s bottom margin does not collapse with the parent‘s bottom margin.

只有垂直的相邻的外边距会产生折叠，除了上述三种情况（分析在后）。

垂直好理解，就是margin-top和margin-bottom，那么什么是相邻的margin呢？

标准中又有了解释：

要判断两个margin是否能够被称之为相邻，必须同时满足下边三个条件

1.两个外边距都属于流中的块级元素，并且处在同一个BFC中。这里不一定就是兄弟元素，父子元素也一样。

2.这两个外边距没有被行内盒子line-boxes、间隙clearance、内边距padding、边border分隔开。说白了就是两个边距之前没有任何其他东西。

3.这两个边距都必须属于垂直相邻的盒子外边距，分别属于以下四种情况中的一种：（1）父元素的top margin和该元素的第一个子元素。（2）元素的bottom margin和它紧邻的后一个兄弟元素的top margin。（3）元素的height为auto（就是不对高度进行设置）时，它的bottom margin和该元素内最后一个子元素的bottom margin。（4）元素内部没有任何子元素，高度设置为0或者auto，min-height的计算值为0，且自己并没有形成新的BFC，这种条件下该元素的top margin和bottom margin