CSS：margin-top 导致滚动条

Question

25

h1元素会导致滚动条出现。有人能解释一下为什么吗？

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
header {
  height:10%;
}
section {
  height:90%;
}

<header>
  <h1>
    Hello
  </h1>
</header>
<section>
  test
</section>

- Matthew

5个回答

6

因为 h1 具有由 默认样式表 应用的边距。

当你将该边距（通常是 margin-top: .67em 和 margin-bottom: .67em）添加到代码中的 height: 100% 中时，这会超出视口高度，从而启动垂直滚动条。

给 h1 设置 margin: 0。

无论使用 box-sizing: content-box 还是 border-box，边距空间始终会添加到你的 height 声明中。

如果你想在不增加高度的情况下在 h1 周围添加空间，请改用 padding 而非 margin，并使用 box-sizing: border-box。以下是一些实施选项：https://css-tricks.com/box-sizing/。

- Michael Benjamin

1

h1默认带有边距。

- Polyov

我知道h1有一个margin。但是为什么它会导致滚动条出现？header占视口的10％，section占90％。h1包含在header中。 - Matthew

1

*
{
  margin:0px auto;
}
html, body {
  margin: 0 ;
  padding: 0;
  height: 100%;
}
header {
  height:10%;
}
section {
  height:90%;
}

<header>
  <h1>
    Hello
  </h1>
</header>
<section>

  test
</section>

只需添加通用选择器并将边距设置为 *{margin:0px auto;}。希望它能起作用。

- Sampad

@AliMottaghiPour 使用*{margin:0px auto}和auto来让浏览器计算边距是一个很好的习惯。 - Sampad

为了重置 CSS 样式，您必须使用 * { margin:0; }。 - Ali Mottaghi Pour

@AliMottaghiPour 你说得完全正确，但是通用选择器 * 使用了流下技术，无论你在这里定义什么都会被继承。 - Sampad

1

标签在块级元素中有一些边距。

要消除这种额外的边距和填充，建议将所有元素的边距和填充重置为0。

可以通过以下方式实现：

 * {
     margin: 0;
     padding: 0;
 }

* {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
header {
  height:10%;
}
section {

<header>
  <h1>
    Hello
  </h1>
</header>
<section>
  test
</section>

- Abhishek

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oriol · Accepted Answer

那是因为：

由于h1的顶部外边距会折叠，所以它表现得像是外边距属于header而不是h1。由于h1的内容高度为10%，所以它的总高度将为calc(10% + 0.67em)。

这就是为什么会发生溢出的原因。

如果删除顶部外边距但保留底部外边距，则没有问题，因为由于非autoheight，底部外边距不会折叠。参考自折叠margin，

如果[...]两个外边距相邻且都属于相邻的盒子边缘[...]例如:

一个盒子的顶部外边距和它的第一个流动子元素的顶部外边距

最后一个流动子元素的底部外边距和父元素的底部外边距如果父元素具有auto计算高度。

因此，您可以执行以下任何操作：