css:margin-top导致滚动条

Question

该h1元素会导致滚动条出现.谁能解释我为什么？

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

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

Answer 1

那是因为

• h1通常,默认情况下会有一些垂直边距0.67em.
• h1崩溃的最高边缘
• height 从不包括保证金区域的高度

由于h1崩塌的上边缘,它的行为类似于属于header而不是的边缘h1.由于内容高度h1是10%,它的总高度将是calc(10% + 0.67em).

这就是溢出的原因.

如果你移除上边距但是留下底边没有问题,因为底部边缘不会因为非边缘而坍塌auto height.从崩溃的边缘,

如果[...]两者都属于垂直相邻的盒子边缘,则两个边距相邻,[...例如]

• 一个盒子的上边缘和第一个流入的孩子的上边缘
• 如果父项已auto计算高度,则最后一个流入子项的下边距和其父项的下边距.

所以你可以做以下任何事情

• 删除h1上边距
• 防止保证金崩溃
• box-sizing: margin-box向CSS工作组提出建议.它可能会被拒绝.

Answer 2

因为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/