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 hasautocomputed height.
所以您可以执行以下任何操作
>删除h1的顶部边距
> Prevent the margin collapse>向CSS工作组提出框大小：边框。这可能会被拒绝。
