css - 使用 em 表示标题

Question

我是使用 em 的新手。到目前为止，我一直使用 px，但现在该继续前进了。我被我的标题困住了。我有一个 H2 和一个 H6 样式相同

font-size:1.2em;
line-height:1.2em;

当我将两个标题放在同一个父元素中时，它们以不同的大小显示。这怎么可能？它们是相对于父级还是相对于它们自身的默认字体大小。

谢谢

http://jsfiddle.net/SBAHa/1

Answer 1

根据您发送的链接 (joets.be/test/index.html)，发生这种情况的原因是您在标题元素中有一个锚标记。

H2内部<a>附有字体大小样式，而 H6 内部则没有。如果您将 1.2em 样式应用于<a>而不是标题，那么这将起作用。

所以本质上，这样做：

h2 a, h6 a{ font-size:1.2em; line-height:1.2em; }

编辑：我已经查看了 css 文件本身，你可以从第 339 行删除“h2 a”吗？

Answer 2

元素 em 的实际大小是相对于其父元素的 font-size 计算的。

看看这篇帮助我理解相关测量的伟大文章：http: //alistapart.com/article/fluidgrids