时间戳

首页 > 解决方案 > H1标题中的字体rem大小表现奇怪

html - H1标题中的字体rem大小表现奇怪

问题描述

我正在尝试使用标题类标语在标题上方制作标语。但是，更改主 h1 css 上的字体大小会导致零更改，而标语类会在我更改其大小时更改。我对为什么我的标题没有响应感到困惑，感谢任何帮助。我试图使它有点类似于这个 W3C 示例（示例 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>

标签： htmlcss

解决方案

我从 W3C 示例 5 中获取了 html，我假设您需要 CSS。

这是我的破解。

body {
  font-size: 18px;
}

header {
  padding: 1rem;
  background-color: red;
  color: black;
  display: inline-block;
}

header p,
header h1 {
  margin: 0;
  padding: 0;
  line-height: 0.75;
  text-transform: uppercase;
}

header h1{
  font-size: 5em;
}

header h1 + p {
  text-align: right;
}
<header>
  <p>Magazine of the Decade</p>
  <h1>THE MONTH</h1>
  <p>The Best of UK and Foreign Media</p>
</header>

推荐阅读