带有 span 的 CSS h1 标签 - 字体大小累积；为什么？

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