如何使用折叠边距调整正文的位置

Question

这是一个恼人的小CSS怪癖。我想知道是否有人可以帮我解决。

声明

我不是在问为什么会这样。我在问这个简单问题是否有一个简单的解决方案。谢谢。

原始问题（与折叠边距相关）

基本上：body代码会在第一个孩子的内容框中开始，而不是 border-box ！因此，如果您的第一个孩子是标头标记（例如，h1），那么body标记的顶部位置将在h1 （和JavaScript）中开始 getBoundingClientRect证实了这一点。

简单的问题是如何使用CSS简单地避免这种行为？

基本示例

如果<{strong> body为position: relative，并且有第一个或最后一个具有上/下边距的子项，那么绝对定位的元素将不会到达顶部（或底部）。

body {
  background: #222;
  position: relative;
}

#backdrop {
  background: rgba(150, 255, 255, 0.7);
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -1;
}

#bottom-buster {
  height: 110vh;
}

<div id="backdrop"></div>
<h1>Inner Margin Problem</h1>
<p>Why doesn't the backdrop reach the top of the page?</p>
<p>How do you solve the problem, without altering margins or positions?</p>
<p>Make sure you solve <b>the problem at the bottom of the page too.</b></p>
<div id="bottom-buster"></div>
<h2>What do you do about this H2?</h2>

以下是问题的代码链接：https://codepen.io/bozdoz/pen/GxNVPv?editors=1100

以下是一些解决方案（但我发现它们太突兀/具体）：

您可以设置#backdrop top: 0并从position: relative删除body来覆盖页面顶部。但那时背景不会到达底部。然后，您可以将position: relative添加到html，它应该会显示在页面的顶部和底部。

以下是我认为上述解决方案存在的潜在问题：如果页面上的其他元素要求body拥有position: relative该怎么办？如果其他一些脚本/样式表将height html设置为100%怎么办？

再一次，明确：是否有更可靠的方法让body代码开始在其第一个孩子的边框处，而不是它的内容框？

谢谢！ ：d