这可能是由于边距折叠,我知道边距折叠,至少它如何影响相邻元素,但我不明白当涉及负边距时它如何在嵌套元素上工作。
例如,在此标记和随附的 CSS 中:
标记
<div class="parent">
<div class="child">
Child 1
</div>
</div>
<div class="parent">
<div class="child negative">
Child 1
</div>
</div>
CSS
body {
background: white;
padding: 45px;
}
.parent {
border: 1px solid black;
margin-bottom: 10px;
}
.negative {
margin-bottom: -1px;
}
现场示例在这里。
当我检查第二个 div 的高度时.parent
,我注意到它比第一个小 1 个像素。.negative
发生这种情况是因为它内部元素的负边距。我快速浏览了 W3C,但找不到这种行为的解释。
有人可以解释一下这里发生了什么,并为我提供一个指向 W3C 规范部分的链接吗?