css - CSS h1 标签与 span - font-size 累积；为什么？

Question

我有一个跨度的 h1 标签，第一个单词在 1.4em 中，其余的在 1.2em 中。如果我写

.item.large h1 {
font-size: 1.4em;
padding-top: 0.3em;
margin-left: 0.4em;
}

.item.large h1 span {
font-size: 1.2em; // why is this not taken into account?
}

span 中的单词实际上比 1.4em 还要大，而不是更小！为什么会发生这种意外的增长以及如何正确设置 h1 标签的一部分？谢谢！

编辑：如果我使用 0,857142857142857em 作为跨度，我在视觉上会得到 1.2em 的高度，但这不是这样做的方法，我敢肯定......

Answer 1

em大小单位是相对于父元素的。您可以使用rem单位来相对于文档的主要单位大小，因此是常数。

有关更多信息，请参阅http://snook.ca/archives/html_and_css/font-size-with-rem

Answer 2

因为 em 是一个相对的度量单位（对于它的父级）。

Answer 3

您可以在 CSS 上使用此代码：

#title h1{
display: block;
font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #fff;
}
#title h1>span {
display: block;
font-size: 11px;
color: #fff;
}

在您的 HTML 代码中：

<h1 id="title">My Title<br><span>My Second Title</span></h1>