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

【问题标题】：CSS h1 tag with span - font-size accumulates; why?CSS h1 标签与 span - font-size 累积；为什么？
【发布时间】：2014-09-06 17:59:23
【问题描述】：

我有一个跨度为 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 的高度，但这不是这样做的方法，我敢肯定......

【问题讨论】：

啊，谢谢两位；有点'o数学然后需要 - 和有趣的数字四舍五入。谁是第一个？

标签： css html font-size

【解决方案1】：

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

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

【讨论】：

我明白了...上次我有一个 rem 文件是 87 年 ;) 但是是的，这听起来像是调整大小的最佳解决方案。感谢您的提示。

【解决方案2】：

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

【讨论】：

【解决方案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>

【讨论】：