为什么 body 之前有一个额外的空间，为什么 p 标签的边距溢出到那个空间？ [复制]答案

【问题标题】：Why is there an additional space before body and why is the margin of the p tag overflowing into that space? [duplicate]为什么 body 之前有一个额外的空间，为什么 p 标签的边距溢出到那个空间？ [复制]
【发布时间】：2021-05-06 22:57:11
【问题描述】：

Codepen 链接：https://codepen.io/AnirudhMS/pen/oNYXaNo

您好，我一直在尝试学习网格布局，但偶然发现了这个我以前没有注意到的问题。在呈现上述 HTML 时，html 标记似乎添加了额外的顶部填充，尽管我在 CSS 中特别提到了 padding: 0。而且，p 标签的默认上边距溢出到这个奇怪的空间。

最简单的做法可能是删除每个元素的边距和填充并自己定义它们。但由于这只是练习代码，我可以使用除html 和body 之外的所有元素的默认边距和填充。

HTML：

<body>
    <p class="note">Note: Check the console log for resources.</p>
        <div class="grid_wrapper normal_grid">
            <p>This is a p tag which is a block element.</p>
            <span>This is a span which is an inline element.</span>
            <span>And this is another span which is an inline element.</span>
        </div>
  </body>

相关的 CSS：

html, body {
    box-sizing: border-box;
    height: 100%;
    margin: 0;
    padding: 0;
}

这是html 标签覆盖的屏幕部分：

这是body标签覆盖的屏幕部分：

从上面两张图可以看出，在 html 和 body 标签之间肯定有某种填充/边距。我认为这是 html 标记的填充，因为这似乎是一个很好的假设。

接下来，这是 p 标签覆盖的区域：

可以看出，p标签的上边距与html和body的间隙重叠。

谁能解释为什么会这样？

提前致谢。

编辑：我认为这可能是上下边距折叠的问题，并尝试使用 overflow: auto 创建块格式上下文，它有效，但我仍然无法解释它为什么有效。

【问题讨论】：

@Paulie_D 更新了问题以包含可重现的代码。

标签： html css overflow margin

【解决方案1】：

填充/边距来自 p 本身而不是 thml 正文标记。您可以将其添加到您的代码中进行测试。

p {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

无论是否练习代码，您都应该始终按照您所说的重置来启动您的 css。

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

阿格斯

【讨论】：

当我说html 标记的填充时，我指的是html 标记的实际顶部填充。 p 标签的边距不同。另外，我在这里没有得到的主要内容是，为什么 p 标签的上边距和 html 标签的上边距彼此重叠。另外，我同意应该从 CSS 重置开始，但认为这是一个例外，以便更好地理解 CSS 的内部工作原理。