Html 当css中提供height属性时，scrollHeight给出的值不正确

我试图得到我的div的scrollHeight，我得到了正确的结果，但是当我在css中为那个特定div添加height属性时，我得到了一个不同的值

只需运行，您将在控制台中看到scrollheight属性的值等于268（等于所有子级的高度之和）

但是当我在css中添加一个height值（比如height:50px；）时，输出结果是252（我认为差值是最后一个子元素的边距）

有人能回答为什么会有差异吗

编辑 由于问题不清楚，我重新表述了id。当我指定父div的高度时，我得到的滚动高度为252像素，而如果我不指定高度或将其设置为“自动”，我得到的是268像素。我只是想知道为什么利润率在后一种情况下不会崩溃？我并不担心页边空白的缩小，只是想知道为什么这两种情况下的卷轴高度不同

下面给出的答案非常好。但是，我也使用javascript获得了正确的滚动高度（包括最后一个子项的底部边距）

---

重读你的问题后，我发现你在问别的问题。但这仍然是我先前发布的答案

总高度正确计算为

254px

。当显式设置小于此值的高度时，浏览器仅计算

238px

。这就像你猜测的那样，底部没有

16px

边距，这是因为“边距崩溃””。由于此规则，最后一个边距被丢弃：

父母和第一个/最后一个孩子

折叠的页边距最终位于父页边距之外

因此，要修复它，您可以使用：

overflow: hidden;

或者您可以使用填充（此填充将“重建”您的边距行为，请参见下面的解释）：

有关更多信息，请访问MDN:

---

编辑：在我重新阅读您的问题之前，这是我的第一个答案。我将把它留在这里，以防有人有类似的问题，也因为这会导致相同的解决方案

这就解决了：为什么兄弟姐妹的高度/边距不符合预期？ 你的身高计算正确。您所面临的情况称为：边距塌陷

这意味着所有

-标记的上下边距都是“合并”的。在7行的情况下，它意味着：

• 18px是一行的高度
• 顶部和底部的边距为16px
• 第一个元素的顶部和最后一个元素的底部如预期所示
• 所有其他的利润率都崩溃了

这导致：

  7 * 18px (height)
+ 6 * 16px (margins in-between)
+ 2 * 16px (margin top and bottom)
= 254px (exact the value calculated by the browser)

您可以使用

填充

来轻松避免这种情况

有关更多信息，请访问MDN:

p {
    padding: 8px;
}
p:first-child, p:last-child {
    padding-top: 16px;
}

  7 * 18px (height)
+ 6 * 16px (margins in-between)
+ 2 * 16px (margin top and bottom)
= 254px (exact the value calculated by the browser)