CSS 2.1规格：8.3.1折叠边距：不能正确解释特殊情况：澄清寻求 [英] CSS 2.1 spec: 8.3.1 Collapsing margins: cannot properly interpret special case: clarification sought
问题描述
CSS 2.1规范的第8.3.1节折叠边距状态： / p>
Section 8.3.1 of the CSS 2.1 spec on collapsing margins states:
如果具有间隙的元素的顶部和底部边距为
邻接，其边距将与邻近的边界
下面的兄弟姐妹，但生成的边距不会与
的父块的底部边距折叠。
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.
确实不稳定，试图从这个语句中做出一些事情：
Here is my, surely erratic, attempt at making something out of this statement:
语句考虑了一个元素X，其中：
The statement considers an element X for which:
-
X有清除，因此，clear：left;，clear：right;
或clear：both;属性已应用于它。
X has clearance, therefore either of the "clear: left;", "clear: right;" or "clear: both;" properties have been applied to it.
由于X的顶部和底部边距相邻，
在正常流的情况下，
Since the top AND bottom margins of X are adjoining, in the case of a normal flow we are considering the scenario where:
- X上面有一个父级和一个兄弟，或
- 一个同上和一个同级以下，或
- X在上面有一个兄弟和一个父
然后规范说，它的边距与以下兄弟姐妹的邻接边界
崩溃，但是最多可以有一个后面的兄弟，
如上所述，所以这本质上必须
Then the spec says, "its margins collapse with the adjoining margins of following siblings", but there can be at most one following sibling, as pointed out above, so this essentially must mean that if there is a sibling following then the margin collapses.
，但是生成的保证金不会与底部保证金$ b $折叠，这意味着如果有一个
兄弟，那么保证金会崩溃。 b的父块。 - 我不明白这一点：如果底部边距
邻近兄弟的顶部边距，那么它不能毗邻
父块的底部边距，除非兄弟的高度为零。
"but that resulting margin does not collapse with the bottom margin of the parent block." - I don't understand this: if the bottom margin is adjacent to a sibling's top margin then it cannot be adjacent to the parent block's bottom margin unless the sibling's height is zero.
我完全困惑。有人可以用更好的
方式解释这个说法，也许有几个说明性的例子？感谢。
I'm utterly confused. Can someone please explain this statement in a better way, perhaps with a few illustrative examples? Thanks.
推荐答案
首先，有几个澄清：
-
有清除的元素是
清除设置为none
上边距和下边距相邻的元素彼此，不与兄弟姐妹。我们讨论的是没有边框或填充的0高度元素，因此元素的上边距和下边距彼此接触。
An element whose top and bottom margin are adjoining means adjoining with each other, not with siblings. We're talking about a 0 height element without border or padding, so the top margin and bottom margin of the element are touching each other. When this happens, they collapse with together, a situation known as collapsing through.
这种情况下，现在，让我们看一个例子：
Now, let's look at an example:
body {
border:solid;
}
#container {
margin: 20px;
background: blue;
}
#floated {
float: left;
width: 20px;
height: 20px;
background: red;
}
#cleared {
clear: left;
margin-top: 10px;
margin-bottom: 20px;
}
#following {
margin-top: 30px;
}
<body>
<div id=container>
<div id=floated></div>
<div id=cleared></div>
<div id=following></div>
<div>
</body>
在这里玩： http：// jsbin。 com / wuvilu / 1 / edit？html，css，output
由于在body上有一个边框，你可以看到＃容器。红色#floated也是一个明显的20x20像素。
Since there is a border on the body, you can see the 20px margin around the blue #container. The red #floated is also an obvious 20px by 20px.
然后，由于它是0高度，没有填充和没有边框，#cleared的顶部和底部边距相互崩溃。它们也与＃的顶部边缘相邻。
Then, since it is 0 height with no padding and no border, the top and bottom margin of the #cleared collapse with each other. They are also adjoining with the top margin of the #following. The size of this collapsed margin is 30px, the largest of the three.
由于＃后面是0高度，没有填充和边框，我们的30px边距是邻接的与#container的底部边缘，并将与它崩溃。除了现在已经引用的规则，而不是。
Since the #following is 0 height and has no padding and no border, our 30px margin is adjoining with the bottom margin of the #container, and would collapse with it. Except now the rule you have quoted kicks in, and it doesn't.
由于它不会与容器的底部边缘折叠，因此必须放置其中的某处。哪里？它从#floater的底边上方10px开始，并从下面延伸20px。为什么？ #cleared的上边距是参与此崩溃边距的最高边距，因此我们从开始的地方开始。因为它是10px，我们的折叠边缘从#floater的下边缘开始10px，即紧靠其前面的元素。
Since it won't collapse with the bottom margin of the container, it has to be placed somewhere within it. Where? It starts from 10px above the bottom edge of #floater, and extends 20px below. Why? The top margin of #cleared is the top-most margin that participates in this collapse margin, so we start where it would start. Since it is 10px, our collapsed margin starts 10px above the bottom edge of #floater, the element immediately before it.
是的，这是疯了，崩溃是疯狂的。折叠通过是一个可怕的想法，它应该永远不会变成CSS，但它之前人们知道更好，现在我们必须处理它，所有的疯狂后果。
Yes, this is insane, and most scenarios that involve collapsing through are insane. Collapsing through was a terrible idea, and it should never have made it into CSS, but it did before people knew better, and now we have to deal with it, and all the crazy consequences.
这篇关于CSS 2.1规格：8.3.1折叠边距：不能正确解释特殊情况：澄清寻求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
