CSS中的折叠边距 [英] Collapsed margin in CSS
问题描述
MDN在此处中解释了利润下降的情况。 / p>
这些是它解释的3条基本规则：
相邻的兄弟姐妹
相邻兄弟姐妹的边际崩溃（除非以后的
兄弟姐妹需要在浮动之后清除）。
父母和第一个/最后一个孩子
如果没有边框，填充，行内内容，
block_formatting_context的创建或清除是为了将一个块的
的页边距与第一个子块的空白区分开，或
没有边框，填充，行内内容，高度，最小高度或max-height
将块的边距底部与最后一个孩子
的边距底部分开，然后这些边距崩溃。倒闭的保证金最终导致父母以外的
。
空块
如果没有边框，填充，内联内容，高度或最小高度
将区块的边距顶部与边距底部分开，然后其顶部
和底部边距折叠。
查询a：在下面的示例中，我需要了解按以下顺序应用的3条规则。
查询b：如果空白块元素的边距折叠，那么它会作为顶部或底部边距出现？您可能会说这有什么不同，但是如果我使用下面的示例中的outline，在这里好像它被折叠为顶部。
基本上我有3 < p> 元素，其中中间一个为空。
<！DOCTYPE html>< html lang = zh-CN> ;< head> < meta charset = UTF-8> < title> ex1< / title> < style>身体{边框：1像素纯黑色； } p {margin-top：10px;底边距：10px;轮廓：1px纯黑色； } #empty {边距：20px; }< / style>< / head>< body> < p>最古老的古典希腊语和拉丁语文字之间几乎没有或没有空格，可以用牛头文字（交替方向）书写。随着时间的流逝，文本方向（从左到右）变得标准化，并且单词分隔符和终端标点符号也变得很普遍。将句子分成组的第一种方法是原始段落，类似于新组开始时的下划线。[3]希腊语paraos演变为pilcrow（¶），在中世纪的英语手稿中可以看到它们插入在句子之间的行内。杂花叶（例如☙）也以相同的方式使用。 < / p> < p id =空>< / p> < p>最古老的古典希腊语和拉丁语文字之间几乎没有或没有空格，可以用牛头文字（交替方向）书写。随着时间的流逝，文本方向（从左到右）变得标准化，并且单词分隔符和终端标点符号也变得很普遍。将句子分成组的第一种方法是原始段落，类似于新组开始时的下划线。[3]希腊语paraos演变为pilcrow（¶），在中世纪的英语手稿中可以看到它们插入在句子之间的行内。杂花叶（例如☙）也以相同的方式使用。 < / p>< / body>< / html>
请注意，第一段和最后一段之间的最终边距为20px。
的边距#empty 折叠掉，产生20px折叠掉边距。该折叠后边距随着第一段的10px底部边距和最后一段的10px顶部边距而折叠。
您的观察结果是正确的： #empty 折叠时，将以其顶部边距呈现。从规范：
- [...] 元素的顶部边框的位置与元素具有非零的底部边框。
请注意，已折叠的元素的位置不会影响其边距处于其他位置的其他元素的位置正在崩溃；
如果元素具有非零底边界如果元素的边距没有倒塌，则为元素的位置，因为底部边框非零，会阻止边距倒塌。
MDN explains collapsed margin here.
These are the basic 3 rules it explains:
Adjacent siblings
The margins of adjacent siblings are collapsed (except when the later sibling needs to be cleared past floats).
Parent and first/last child
If there is no border, padding, inline content, block_formatting_context created or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
Empty blocks
If there is no border, padding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse.
Query a: I need to understand the 3 rules that are applied in which sequence in the example below.
Query b: If for empty block element margins collapse, then it occurs as top or bottom margin for it ? You might say what difference it makes but then if I use outline as in example below, here it seems as if it is collapsed as top.
Basically I have 3 <p> elements in which middle one is empty.
<!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>
Note that the final margin between the first and last paragraph is 20px.
The margins of #empty collapse through, resulting in a 20px collapsed-through margin. This collapsed-through margin collapses with the 10px bottom margin of the first paragraph, and the 10px top margin of the last paragraph. This results in a 20px gap between the first and last paragraphs, since the collapsed-through margin is larger than either of their margins and therefore swallows them both.
Your observation is correct: #empty, when its collapsed through, is rendered with its top margin. From the spec:
- [...] The position of the element's top border edge is the same as it would have been if the element had a non-zero bottom border.
Note that the positions of elements that have been collapsed through have no effect on the positions of the other elements with whose margins they are being collapsed; the top border edge position is only required for laying out descendants of these elements.
The position that "would have been if the element had a non-zero bottom border" is the position of the element if the element's margins did not collapse through, since having a non-zero bottom border blocks the margins from collapsing through.
这篇关于CSS中的折叠边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
