html - H1 标题中的字体大小调整很奇怪

Question

我正在尝试使用 header 类标语在我的 header 上方制作标语。但是，更改主 h1 css 上的字体大小会使更改为零，而只要我更改其大小，标语类就会更改。我对为什么我的 header 没有响应感到困惑，感谢您的帮助。我试图让它有点相似 to this W3C example (示例 5)。

html {
  font-size: 18px;
}

h1 {
  font-size: 3em;
  padding: 0px;
}

h1.tagline {
  font-size: 1.5em;
  margin-bottom: -20px;
  margin-top: -20px;
}

<h1 class="tagline">Homepage for</h1>
<h1>My Name</h1>

Answer 1

我想你想要 tagline改变尺寸与 h1 的关系？如果是，将所有文本放入一个 h1 标签，使用span对于标语，<br> for the line break and a value smaller than 1em for tagline. Now the tagline font-size will change in relation if you change the字体大小 for h1`

html {
  font-size: 18px;
}

h1 {
  font-size: 3em;
  padding: 0px;
}

h1 > span.tagline {
  font-size: 0.5em;
  margin-bottom: -20px;
  margin-top: -20px;
}

<h1><span class="tagline">Homepage for</span>
<br>My Name</h1>