html – css:margin-top导致滚动条

h1元素使滚动条出现。任何人都可以解释为什么吗

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
header {
  height:10%;
}
section {
  height:90%;
}
<header>
  <h1>
    Hello
  </h1>
</header>
<section>
  test
</section>
那是因为

> h1默认有一些垂直边距,通常为0.67em。
> h1的顶部边缘崩溃
>高度永远不包括边缘区域的高度

由于h1的顶部边缘崩溃,它的行为像属于标题而不是h1的边距。由于h1的内容高度为10%,其总高度将被计算(10%0.67em)。

这就是为什么有溢出。

如果你删除顶部边距但是离开底部没有任何问题,因为底部不会崩溃,由于非自动高度。从Collapsing margins

Two margins are adjoining if […] both belong to vertically-adjacent
box edges, [… e.g.]

  • top margin of a box and top margin of its first in-flow child
  • bottom margin of a last in-flow child and bottom
    margin of its parent if the parent has auto computed height.

所以您可以执行以下任何操作

>删除h1的顶部边距
> Prevent the margin collapse
>向CSS工作组提出框大小:边框。这可能会被拒绝。

翻译自:https://stackoverflow.com/questions/38676749/css-margin-top-causes-scrollbar

转载注明原文:html – css:margin-top导致滚动条