h1大小在Div标记和section标记中不同

Question

我在section标记和div标记中使用了H1标记，但section标记中的H1比div标记中的H1标记小。为什么？

<section>
<h1>Hello World</h1>
</section>
<h1>Hello World</h1>
<hr>
<div>
<h1>Hello World</h1>
</div>
<h1>Hello World</h1>

这是输出

Answer 1

浏览器有默认的样式表。可以在浏览器中使用"开发人员工具"来检查应用于图元的样式。

Chrome的开发者工具(例如(显示：

h1 {
display: block;
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}

和

:-webkit-any(article,aside,nav,section) h1 {
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
}

因此，Chrome的开发人员正是这样决定的，应该呈现一个部分的顶级标题。其他浏览器开发人员可能也会做出类似的选择。

如果你不喜欢它，可以编写自己的CSS来覆盖它