HTML元素高度包括外边距和子元素的外边距

Question

我可以使用以下代码获取元素的高度：

HTMLElement.offsetHeight

但这是没有边距的。我可以使用查找元素高度，包括边距函数来获取包括边距在内的高度。

但是，如果我有一个子元素比父元素具有更大的边距，那么该函数将无法提供我想要的高度。如何获取包括元素和子元素边距的元素高度？

相关示例：

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 元素的外边距。但如果我去掉 inner 的 1px 填充，那么 outer.offsetHeight 就会忽略 p 元素的外边距。为什么呢？

- Dag Henning Liodden Sørbø

---

我遇到了“Uncaught TypeError: outer.offsetHeight is not a function”错误。你能提供一个fiddle吗？你可以尝试给外部div添加overflow: hidden并检查是否有效。 - Aditya Bhave

当然，offsetHeight不是一个函数。我的错。现在已经纠正了。 - Dag Henning Liodden Sørbø

Answer 1

那是因为"外边距合并"。基本上，它将您的块的两个外边距合并为一个。在您的情况下，仅当没有填充时才会发生。

在我看来，规范有点难以阅读，所以您可能会发现MDN更容易理解！

- likle

---

谢谢回复。那么我需要填充或透明边框才能获得完整的高度。好的，知道了。 - Dag Henning Liodden Sørbø

如果您想要某些不可见的内容，您也可以设置 overflow:auto，这将创建一个新的块级格式化上下文。 - likle

但是这会在需要时添加滚动条。 - Dag Henning Liodden Sørbø

是的！如果存在可滚动的溢出。有时您可以避免这种情况（例如通过在元素内部设置高度而不是在容器本身上设置高度），但使用变换会更加棘手。 - likle

Answer 2

将#inner的显示方式更改为flex：

#inner {
  display: flex;
}

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

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

- Charles Cavalcante

---

但是 display: flex 也有其他的影响。但它似乎可以工作。 - Dag Henning Liodden Sørbø

这有效是因为它预防了边距塌陷，正如被标记为正确答案的建议所示。 - Zach Saucier