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?
}

跨度中的单词实际上甚至大于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>

带有span的CSS h1标签 - font-size累积;为什么？

3 个答案: