Line-height 和 vertical-align 是比较简单的CSS属性，以至于我们大多数人都觉得完全理解这两个属性是如何工作以及如何使用它们。实际并非如此。这两个属性非常复杂，也许可以说是最难理解的属性了。CSS有一个鲜为人知的特性：内联元素格式化。这两者恰好在这个特性上起着重要作用。
例如line-height 可以是一个长度或者是一个没有单位的数值注1，但它的默认值是normal。normal又代表什么呢？我们把它当作是1或者是1.2，甚至连CSS spec都没有讲清楚这个值是什么。我们知道，无单位的line-height 是 font-size相关联的，但问题是font-size：100px在不同字体时表现是不一样的，那line-height是相同还是不同的？ 它的值真的在1到1.2之间吗？ 还有 vertical-align，它对line-height有什么影响？
因此我们需要深入研究一下这个不那么简单的CSS机制。
让我们先研究下font-size
看看这段简单的HTML代码，
包含3个，每个都有不同的 font-family.
<p>
<span class="a">Ba</span>
<span class="b">Ba</span>
<span class="c">Ba</span></p>
p { font-size: 100px }.a { font-family: Helvetica }.b { font-family: Gruppo }.c { font-family: Catamaran }
使用同样的font-size和不同的font-family会产生不同高度的元素
一个字体定义了它的em-square（或UPM，即每个em的单位)。也就是一个容器，每个字符将被绘制在容器里。这个正方形使用相对单位，通常设置为1000单位，但也可以是1024，2048或其他任何值。
根据字体的相对单位，设置字体的其他度量值（升部，降部，大写高度，x字高等等）。请注意，某些值可能会超出这个方形容器。
浏览器为了适应所需的字体大小，会缩放相对单位。
例如line-height 可以是一个长度或者是一个没有单位的数值注1，但它的默认值是normal。normal又代表什么呢？我们把它当作是1或者是1.2，甚至连CSS spec都没有讲清楚这个值是什么。我们知道，无单位的line-height 是 font-size相关联的，但问题是font-size：100px在不同字体时表现是不一样的，那line-height是相同还是不同的？ 它的值真的在1到1.2之间吗？ 还有 vertical-align，它对line-height有什么影响？
因此我们需要深入研究一下这个不那么简单的CSS机制。
让我们先研究下font-size
看看这段简单的HTML代码，
包含3个，每个都有不同的 font-family.
<p>
<span class="a">Ba</span>
<span class="b">Ba</span>
<span class="c">Ba</span></p>
p { font-size: 100px }.a { font-family: Helvetica }.b { font-family: Gruppo }.c { font-family: Catamaran }
使用同样的font-size和不同的font-family会产生不同高度的元素
一个字体定义了它的em-square（或UPM，即每个em的单位)。也就是一个容器，每个字符将被绘制在容器里。这个正方形使用相对单位，通常设置为1000单位，但也可以是1024，2048或其他任何值。
根据字体的相对单位，设置字体的其他度量值（升部，降部，大写高度，x字高等等）。请注意，某些值可能会超出这个方形容器。
浏览器为了适应所需的字体大小，会缩放相对单位。
