为什么CSS中的字体大小不等于宽度和高度？

Question

我有以下HTML代码：

<p id="main">
    H  
</p>

和以下CSS：

p {
  border-style: solid;
  border-color: black;
  border-width: 1em;
  font-size: 1em;
  height: 1em;
  width: 1em;
  padding: 0em;
}

为什么内容框的高度和宽度不等于font-size。为什么字母H和边框之间存在间隙，如下面的输出所示。

Output

Answer 1

因为那不是字体的设计方式。例如，字母a在顶部包含相当大的空白块，好吧，同样的事情发生在那个H.你可以在实际选择文本时看到它。 H的形状不是形成角色的轮廓。它是一个由字体设计师定义的虚构框。

字体不仅仅是形状，还包含形状。字体设计师花时间考虑字体在多行上的外观，因此他们也会计算字体中的一些间距。

这导致类型的可预测性较低，但更容易引人注目。这就是为什么许多字体将被调整为看起来恰到好处，但从数学角度来看它们并非如此。最好的例子是看看圆形字母实际上是如何从底部突出的，仅仅因为我们的眼睛看到它是错误的。这意味着你的盒子也不会从基线开始。

检查此图像是否有帮助（是的，有些东西可以像行高一样调整，但实质上这个图像会显示你认为你拥有的盒子以及实际存在的盒子）：

简而言之，字体设计清晰易读，不易计算。

更新：另一张图片

只是添加，@ Paulie_D在这个问题的评论中有一个很好的例证，并且为了将来的参考它也可能是好的看看它：http://www.smashingmagazine.com/wp-content/uploads/2010/05/type-002.gif

Answer 2

p {
  border-style: solid;
  border-color: black;
  border-width: 1em;
  font-size: 1em;
  height: 1em;
  width: 13px;
  padding: 0em;
}

<p id="main">
    H  
</p>

试试这个。