我尝试获取 div 的滚动高度，并且得到了正确的结果，但是当我在 css 中为该特定 div 添加 height 属性时，我得到了不同的值。
只需运行fiddle您将在控制台中看到scrollheight属性的值等于268（等于所有子项的高度之和）
但是当我在 css 中添加高度值（例如 height:50px;）时，输出结果为 252（我认为差异是最后一个子元素的边距）。
有人可以回答为什么会有差异吗？
Edit由于问题不清楚，我重新表述了 id。当我指定父 div 的高度时，我得到的滚动高度为 252 像素，而如果我不指定高度或将其设置为“自动”，我得到的滚动高度为 268 像素。我只是想知道为什么在后一种情况下边距也不会崩溃？我并不担心折叠的边距，只是想知道为什么这两种情况下滚动高度不同？
下面给出的答案完全没问题。不过，我还使用 javascript 获得了正确的滚动高度（包括最后一个子元素的下边距）
var h = $(div).height();
$(div).height("auto");
var ch = $(div)[0].scrollHeight;
$(div).height(h);
重新阅读您的问题后，我发现您在问其他问题。但这仍然是我之前发布的相同答案。
总高度计算正确254px。当您显式设置小于该值的高度时，浏览器仅计算238px。这 - 就像你的猜测 - 没有16px底部的边距，发生的原因是“边距塌陷"。由于这条规则，最后一个边距被丢弃：
父母和第一个/最后一个孩子
折叠的边距最终位于父级之外。
因此，要修复它，您可以使用：
overflow: hidden;
或者您可以使用填充（此填充会“重建”您的边距行为，请参阅下面的说明）：
p {
padding: 8px;
}
p:first-child, p:last-child {
padding-top: 16px;
}
欲了解更多信息，请访问 MDN：利润崩溃.
Edit:这是我在重新阅读您的问题之前的第一个答案。我将把它留在这里，以防有人有类似的问题，也因为它会导致相同的解决方案。
这解决了：为什么兄弟姐妹的高度/边距不符合预期？
您的身高计算正确。你所面临的称为：边距塌陷.
这意味着您所有的顶部和底部边距<p>-标签被“合并”。在您的情况下，有 7 行，这意味着：
- 18px是一行的高度
- 顶部和底部边距均为 16 像素
- 第一个元素的顶部和最后一个元素的底部按预期显示
- 所有其他边距都折叠起来
结果是：
7 * 18px (height)
+ 6 * 16px (margins in-between)
+ 2 * 16px (margin top and bottom)
= 254px (exact the value calculated by the browser)
您可以通过使用轻松避免这种情况padding反而。
欲了解更多信息，请访问 MDN：利润崩溃.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
