HTML元素高度，包括边距和子级边距

Question

我可以通过以下方式获取元素的高度

HTMLElement.offsetHeight

但这没有边距。我可以使用Find element height, including margin中的函数来获取包括边距在内的高度。

但是，如果我有一个子元素的边距比父元素大，则该函数不会给我想要的高度。如何获取包含元素和子元素的边距的元素的高度？

相关示例：

HTML：

<div id="outer">
  <div id="inner">
    <p>
      New York
    </p>
  </div>
</div>

CSS：

#inner {
  padding-top: 1px;
  padding-bottom: 1px;
}

#inner p {
  margin-top: 21px;
  margin-bottom: 100px;
}

如果使用 outer.offsetHeight ，则高度包括p元素的边距。但是，如果我删除了内部的1px填充，则 outer.offsetHeight 会忽略p元素的边距。为什么？

Answer 1

原因是"margin collapsing"。基本上，它将块的两个边距合并为一个。就您而言，它只会在没有填充的情况下发生。

我认为该规范有点难以阅读，因此您可能会发现MDN更容易！

Answer 2

将 #inner 显示更改为 flex ：

#inner {
  display: flex;
}

JSFiddle： https://jsfiddle.net/charlesartbr/gs3orv59/12/