掌握边界重叠 | CSS Box Model: Mastering margin collapsing
CSS盒模型：Mastering margin collapsing
块的顶部和底部边距有时会被合并（折叠）成单个边距，其大小是单个边距中最大的（或者只是其中的一个，如果它们相等），这种行为称为边缘折叠。请注意，浮动元素和绝对定位元素的边距不会折叠。
边缘塌陷有三种基本情况：
相邻的同级
有些事情要注意：
- 当上述情况合并时，会发生更复杂的边缘折叠（两个以上的边距）。
- 这些规则甚至适用于零的边际，所以第一个/最后一个孩子的边际在父母之外（根据上面的规则）最终是否在父母的边际为零。
- 当涉及负利润率时，折价利润率的大小是最大正利润率和最小（最负利率）负利润率之和。
- 当所有利润率都为负值时，折叠保证金的规模是最小的（最负的）保证金。这适用于相邻元素和嵌套元素。
实例
HTML
<p>The bottom margin of this paragraph is collapsed …</p>
<p>… with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p>
<div>This parent element contains two paragraphs!
<p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p>
<p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p>
</div>
<p>I am <code>2rem</code> below the element above.</p>
CSS
div {
margin: 2rem 0;
background: lavender;
}
p {
margin: .4rem 0 1.2rem 0;
background: yellow;
}
结果
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Level 2 (Revision 1)The definition of 'margin collapsing' in that specification. | Recommendation | Initial definition. |
