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

我一直在运行一些测试，以找出为什么一些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>

这是第二部分的第一段！这段是200像素高

这是第二部分的第二段！这段是300像素高

这是第二部分的第三段！这段是400像素高

我试图准确地获取div的高度，但scrollHeight返回“910px”。为什么呢？我希望滚动高度为“900px”，因为它不包括边距

---

是否有一些

边距折叠并计入高度？为什么是一些而不是其他。我尝试了许多不同的边距高度组合，但没有任何值显示发生了什么

边距添加到长方体模型中，因此在您的情况下，高度为元素高度+边距。然而，当相邻元素有边距时，边距会崩溃，最大值将战胜添加的两个元素。这篇文章解释得很好

我认为你没有理解“利润崩溃”的含义

我将在以下示例中使用：

HTML: 元素上的上、下页边距将与其同级元素（或者如果不存在上一个/下一个同级元素，则其父元素*）合并，而不是将每个页边距显示为单独的间距，以便它们之间的间距为最大的页边距

如果没有保证金崩溃，上述标记将显示为：

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

使用边距折叠时，标记显示为：

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

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

在我的示例中，高度是

100+5+100+5+100=310

在您的示例中，高度为

200+5+300+5+400=910

---

---

*还有一些额外的复杂性涉及到填充、定位和浮动，即。

scrollHeight

返回

即使示例中的每个边距都折叠，第二个

p

上下仍有5px的边距，这计入其边之间的总距离

这是900px+5px+5px=910px

为了简化，请执行以下操作：

第一个p加上105px（100px高度+5px底部边缘塌陷）=105px


第二个p加上105px（100px高度+5px底部边缘塌陷）=210px


第三个p加上105px（100px高度+5px底部边缘塌陷）=315px


最后p加上100px（100px高度）=415px

​

Nitpick:scrollHeight不是任何通用标准的一部分，它是一些浏览器碰巧复制的微软特有的东西。因此，完全有可能不同的浏览器会实现不同的方式。“为什么只有一些HTML页边距会塌陷？”。seconddiv的高度是

200+5+300+5+400

。内部

p

元素之间的边距是

div

的一部分height@zzzzBov添加到div高度的是段落的上边距还是下边距？我能理解卷轴的高度是

200+5（页边距底部）+5（页边距顶部）+300+5（页边距底部）+5（页边距顶部）+400

！我认为崩溃意味着一个单一的利润率与之前两个利润率的高度相同。这真的只是摆脱了两个利润率中较小的一个！谢谢这是一个极好的边缘塌陷的视觉表现。做得好。

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

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

<div id="seconddiv" style="margin-top:10px; margin-bottom:10px;">

    <!--
    Top edge is first p's top position (without top margin)
    -->

    <p style="height:100px; margin-top:5px; margin-bottom:5px;">
    First p adds 105px (100px height + 5px bottom margin collapsed) = 105px
    </p>
    <p style="height:100px; margin-top:5px; margin-bottom:5px;">
    Second p adds 105px (100px height + 5px bottom margin collapsed) = 210px
    </p>
    <p style="height:100px; margin-top:5px; margin-bottom:5px;">
    Third p adds 105px (100px height + 5px bottom margin collapsed) = 315px
    </p>
    <p style="height:100px; margin-top:5px; margin-bottom:5px;">
    Last p adds 100px (100px height) = 415px
    </p>

    <!--
    We're at the bottom edge. Margins are excluded, the total height is 415px
    -->

</div>​