深度解析CSS：字体度量，行高和垂直对齐

line-height和vertical-align是简单的CSS属性。 它看起来很简单，我们大多数人都相信完全理解了它们是如何工作的以及如何使用它们。 但事实并非如此， 他们真的是很复杂的，也许是最难的，因为他们在创建CSS的一个不为人所知的特性：内联格式化上下文中有一个重要的作用。
例如，line-height可以设置为长度或无单位值1，默认值为normal。 OK，但是什么是normal呢？ 我们经常读到它或许是1，或者也可能是1.2，即使CSS规范叙述的也不是很清楚。 我们知道无单位行高是相对于字体大小来说的，但问题是font-size：100px在不同的font-family中表现是不同，因此行高是否总是相同的或不同的？ 是真的在1和1.2之间吗？ vertical-align对line-height的影响又是什么？
一起深入了解一个不那么简单的CSS机制...

先谈一谈font-size

<p>
    <span class="a">Ba</span>
    <span class="b">Ba</span>
    <span class="c">Ba</span>
</p>

p  { 
      font-size: 100px;
      background: tan;
}
.a { 
      font-family: Helvetica;
      background: #888;
  }
.b { 
       font-family: Courier New;
       background: #888;
}
.c { 
      font-family: Catamaran;
      background: #888;
}

不同的字体，相同的字体大小，显示了不同的高度

我们发现了font-size：100px不创建100px高度的元素？ 我测量并发现这些值：Helvetica：115px，Courier New：114px和Catamaran：140px