MDN解释了折叠边距here。
这是它解释的基本3条规则：
相邻的兄弟姐妹
相邻兄弟姐妹的边缘被折叠（除了后者 兄弟姐妹需要通过花车清理。）
父母和第一个/最后一个孩子
如果没有边框，填充，内联内容， block_formatting_context创建或清除分隔 从第一个子块的边缘顶部开始的块的顶部 - 或者 没有边框，填充，内联内容，高度，最小高度或最大高度 将块的边距底部与其边缘底部分开 最后一个孩子，然后那些边缘崩溃了。折叠的保证金最终结束 在父母之外。
清空
如果没有边框，填充，内联内容，高度或最小高度 将块的边缘顶部与其边缘底部分开，然后将其顶部分开 和底部边缘崩溃。
查询a：我需要了解下面示例中应用于哪个序列的3条规则。
查询b：如果空块元素边距崩溃，那么它会作为顶部或底部边距出现吗？你可能会说它有什么不同但是如果我在下面的例子中使用大纲，这里看起来好像它被折叠为顶部。
基本上我有3个<p>个元素，其中一个是空的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ex1</title>
<style>
body{
border: 1px solid black;
}
p{
margin-top: 10px;
margin-bottom: 10px;
outline: 1px solid black;
}
#empty{
margin: 20px;
}
</style>
</head>
<body>
<p>
The oldest classical Greek and Latin writing had little or no space between words, and could be written in boustrophedon (alternating directions). Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation became common. The first way to divide sentences into groups was the original paragraphos, similar to an underscore at the beginning of the new group.[3] The Greek paragraphos evolved into the pilcrow (¶), which in English manuscripts in the Middle Ages can be seen inserted inline between sentences. The hedera leaf (e.g. ☙) has also been used in the same way.
</p>
<p id ='empty'></p>
<p>
The oldest classical Greek and Latin writing had little or no space between words, and could be written in boustrophedon (alternating directions). Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation became common. The first way to divide sentences into groups was the original paragraphos, similar to an underscore at the beginning of the new group.[3] The Greek paragraphos evolved into the pilcrow (¶), which in English manuscripts in the Middle Ages can be seen inserted inline between sentences. The hedera leaf (e.g. ☙) has also been used in the same way.
</p>
</body>
</html>
请注意，第一段和最后一段之间的最终边距为20px。
答案 0 :(得分：2)
查询a：我需要了解下面示例中应用于哪个序列的3条规则。
只要对于具有不同值的相同选择器没有多次声明规则，序列就没那么重要了。
身体上的边界，将保留第一个和最后一个孩子内部的边缘。
空段的高度为0，边距将与前一个和下一个sibblings折叠/合并，它会表现得好像不在那里。添加1px的高度来测试行为：
请参阅下面的代码段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ex1</title>
<style>
body{
border: 1px solid black;
}
p{
margin-top: 10px;
margin-bottom: 10px;
outline: 1px solid black;
}
#empty{
margin: 20px;
height:1px;
}
</style>
</head>
<body>
<p>
The oldest classical Greek and Latin writing had little or no space between words, and could be written in boustrophedon (alternating directions). Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation became common. The first way to divide sentences into groups was the original paragraphos, similar to an underscore at the beginning of the new group.[3] The Greek paragraphos evolved into the pilcrow (¶), which in English manuscripts in the Middle Ages can be seen inserted inline between sentences. The hedera leaf (e.g. ☙) has also been used in the same way.
</p>
<p id ='empty'></p>
<p>
The oldest classical Greek and Latin writing had little or no space between words, and could be written in boustrophedon (alternating directions). Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation became common. The first way to divide sentences into groups was the original paragraphos, similar to an underscore at the beginning of the new group.[3] The Greek paragraphos evolved into the pilcrow (¶), which in English manuscripts in the Middle Ages can be seen inserted inline between sentences. The hedera leaf (e.g. ☙) has also been used in the same way.
</p>
</body>
</html>
根据我自己的观点，如果未绘制元素（height = 0 = null），即使display未设置为none，也不应绘制轮廓。
查询b：如果空块元素边距崩溃，那么它是作为顶部还是底部边缘出现的？你可能会说它有什么不同但是如果我在下面的例子中使用大纲，这里看起来好像它被折叠为顶部。
如果高度为0且没有阻止格式化上下文重置，则当元素实际绘制时，浏览器仍会尽力绘制此轮廓。它将从顶部边距值绘制轮廓，如果绘制该元素将成立。
触发BFC的SEE片段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ex1</title>
<style>
body {
border: 1px solid black;
}
p {
margin-top: 10px;
margin-bottom: 10px;
outline: 1px solid black;
}
#empty {
margin: 20px;
/* reset BFC see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context*/
display: table;
/* overflow:hidden; resets also the BFC read the link provided to start understands how this works :) */
}
</style>
</head>
<body>
<p>
The oldest classical Greek and Latin writing had little or no space between words, and could be written in boustrophedon (alternating directions). Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation
became common. The first way to divide sentences into groups was the original paragraphos, similar to an underscore at the beginning of the new group.[3] The Greek paragraphos evolved into the pilcrow (¶), which in English manuscripts in the Middle
Ages can be seen inserted inline between sentences. The hedera leaf (e.g. ☙) has also been used in the same way.
</p>
<p id='empty'></p>
<p>
The oldest classical Greek and Latin writing had little or no space between words, and could be written in boustrophedon (alternating directions). Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation
became common. The first way to divide sentences into groups was the original paragraphos, similar to an underscore at the beginning of the new group.[3] The Greek paragraphos evolved into the pilcrow (¶), which in English manuscripts in the Middle
Ages can be seen inserted inline between sentences. The hedera leaf (e.g. ☙) has also been used in the same way.
</p>
</body>
</html>
答案 1 :(得分：1)
#empty的边距崩溃，导致20px的折叠边缘。这个折叠的边距与第一段的10px底部边缘和最后一段的10px上边距一起崩溃。这会在第一段和最后一段之间产生20px的差距，因为折叠的边距大于它们的任何一个边距，因此吞下它们两者。
您的观察是正确的：#empty在折叠时，以其上边距呈现。来自spec：
- [...] 元素顶部边框边缘的位置与元素底部边框非零时的位置相同。
请注意，已折叠的元素的位置对其折叠边距的其他元素的位置没有影响;只有在布置这些元素的后代时才需要顶部边界边缘位置。
如果元素的底部边界非零，那么＆＃34;的位置是＆＃34;是元素的位置，如果元素的边距没有崩溃，因为具有非零的底部边框会阻止边缘折叠。