为什么只有一些CSS边距崩溃？

Question

我一直在运行一些测试,以找出为什么有些CSS边缘会崩溃以及为什么有些没有.我有以下测试代码:

<div id="seconddiv" style="margin-top:10px; margin-bottom:10px;">
    <p style="height:200px; margin-top:5px; margin-bottom:5px;">This is the first paragraph in  the second div!This paragraph is 200px tall.</p>
    <p style="height:300px; margin-top:5px; margin-bottom:5px;">This is the second paragraph in the second div!This paragraph is 300 px tall.</p>
    <p style="height:400px; margin-top:5px; margin-bottom:5px;">This is the third paragraph in the second div!This paragraph is 400px tall.</p>
</div>

我试图准确地获得div的高度,但scrollHeight返回"910px".这是为什么？我期望"900px"作为scrollHeight,因为它不包括边距.

一些<p>边缘是否崩溃并计入高度？为什么有些人而不是其他人 我尝试了许多不同的边距高度组合,没有任何数据显示正在发生的事情.

Answer 1

我不认为你理解"边际崩溃"意味着什么.

我将在以下示例中使用此简化标记:

HTML:

<div>
   <span>A</span>
   <span>B</span>
   <span>C</span>
</div>

CSS:

span {
    display: block;
    height: 100px;
    margin: 5px 0;
}

不是将每个边距显示为单独的间距,而是元素的顶部和底部边距将与它们的兄弟(或者如果不存在prev/next兄弟,它们的父*)元素合并,以便它们之间的间距是最大边距.

如果没有保证金崩溃,则上述标记将显示为:

+div-----+
| margin |
|+span--+|
||A     ||
|+------+|
| margin |
| margin |
|+span--+|
||B     ||
|+------+|
| margin |
| margin |
|+span--+|
||C     ||
|+------+|
| margin |
+--------+

利用margin-collapse,标记显示为:

  margin
+div-----+
|+span--+|
||A     ||
|+------+|
| margin |
|+span--+|
||B     ||
|+------+|
| margin |
|+span--+|
||C     ||
|+------+|
+--------+
  margin

这对于div的高度意味着它包括每个元素的高度和它们之间的边距.

在我的例子中,高度是100 + 5 + 100 + 5 + 100 = 310.

在你的例子中,高度是200 + 5 + 300 + 5 + 400 = 910.

_{*有一些额外的复杂性涉及填充,定位和浮动,这由规范描述.}