在介绍 CSS 的 line-height 属性之前，我们先来看看 height 属性。height 属性适用于大部分元素，除了行内非替换元素（replaced inline element）。所谓的替换元素，就是指 <img>，<object>，<button>，<input>，<select>，<textarea>，<iframe> 等默认就有一定大小的元素。因此，行内非替换元素，比如 <a>，<em>，<span> 等，将无法设置 height 属性，它们的高度由字体大小决定。
元素的 height 属性的取值可以是长度值或者比例值。如果是比例值，则根据它所在的包含块（containing block）的高度来计算。height 属性的默认值为 auto，此时将根据它的子元素的大小来确定。
元素的行高（line-height）属性适用于所有元素，它的取值有这几种：normal，<length>，<number>，<percentage>。
| 取值 | 描述 |
| normal | 默认值，由浏览器设置合理的行高，一般为字体大小的 1.0 倍到 1.2 倍之间 |
| <length> | 设置行高为具体的长度，例如 div {line-height: 24px; font-size: 16px} |
| <number> | 设置行高为元素的字体大小的若干倍，例如 p {line-height: 1.5; font-size: 14px} |
| <percentage> | 设置行高为元素的实际字体大小乘以一个比例，例如 p {line-height: 120%; font-size: 10pt} |
倍数值和比例值的差别在于，使用前者子元素会将继承这个倍数值，而使用后者子元素将继承根据比例值计算出来的长度。用比例值时，如果子元素的字体大小不同，甚至比父元素的字体还大，将得到很糟糕的效果。因此，应该避免使用比例值，以及 em 的长度值。
一般 line-height 比 font-size 大，两者的差（称为 leading）将平均分到元素的顶部和底部中。这时候设定文本的 border 和 background-color 时还是使用 font-size 的值，而选择文本时将使用 line-height 值（除了位于首行的文本，选择时看到的高度为 font-size + (line-height - font-size) / 2）。
参考资料：
[1] W3C CSS 2.1 Conformance: requirements and recommendations #Replaced element
[2] W3C CSS 2.1 Visual formatting model details #height
[3] W3C CSS 2.1 Visual formatting model details #line-height
[4] W3C CSS 2.1 Visual formatting model #inline-boxes
[5] demosthenes.info – What The Heck Is A Replaced Element?
[6] line-height - CSS | MDN
[7] css行高line-height的一些深入理解及应用 - 张鑫旭
[8] line-height与单行或多行文字的垂直居中 - 张鑫旭
[9] 行高：line-height属性[1] - 豆豆猫的窝
[A] 深入理解CSS中的行高 - Rain Man - 博客园
[B] 你未必知道的CSS故事：揭开leading的面纱
