为什么body标签内的h1标签会向下推body标签，导致滚动条出现？ [复制]答案

【问题标题】：Why does an h1 tag inside a body tag pushes the body tag down, resulting in a scrollbar showing up? [duplicate]为什么body标签内的h1标签会向下推body标签，导致滚动条出现？ [复制]
【发布时间】：2022-02-14 02:41:01
【问题描述】：

为什么在这个截图中会出现滚动条？

我看到 body 是 100% 高的，如 CSS 所示，但它没有位于页面顶部。相反，h1 标记的边距将 body 向下推该量，导致滚动条，因为 body 不适合页面。

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.root {
  height: 100%;
}

<div class='root'>
<h1>Test</h1>
</div>

我的问题是.. 如果边距在h1 标记中，而h1 在body 内，为什么body 被向下推并且滚动条出现？

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
问题是 H1 元素的边距不在 BODY 的“内部”，而是在它的上方“挂起”。查看边距折叠：developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/…
啊，是的。我通常不会遇到这个问题，因为页面上的第一个元素通常没有边距。忘记崩溃了，谢谢！

标签： html css

【解决方案1】：

你有几个选择：

将 h1 的边距设置为 0
将溢出设置为隐藏在正文中
从正文和 html 中删除高度：100%

下面的 sn-p 完成所有三个，但任何 1 都可以工作

html, body {
  margin: 0;
  padding: 0;
  overflow:hidden;
 }
 
 

.root {
  height: 100%;
}

h1{margin:0;}

<div class='root'>
<h1>Test</h1>
</div>

【讨论】：

【解决方案2】：

删除height: 100%;也一样

html, body {
  margin: 0;
  padding: 0; 
}

.root {
  height: 100%;
}

<div class='root'>
<h1>Test</h1>
</div>

使用margin 定位H1 元素。

大多数程序员使用 CSS * 选择器。

* 选择器选择所有元素。
* 选择器还可以选择另一个元素内的所有元素。
阅读更多信息here。

例子：

html, body {
  margin: 0;
  padding: 0; 
}
*{
  margin: 0;
}
.root {
  height: 100%;
}

<div class='root'>
<h1>Test</h1>
</div>

在这种情况下，所有元素都有一个margin: 0; 即使您离开height: 100%;、html 和body，它也会起作用。

最后一个选项，就像上面一样，为每个元素写一个margin: 0;。

html,
body {
  margin: 0;
  padding: 0; 
}

.root {
  height: 100%;
}

h1 {
  margin: 0;
}

<div class='root'>
<h1>Test</h1>
</div>

【讨论】：