前言
CSS 中的 line-height 属性值有 normal | <number> | <length> | <percentage> | inherit。
属性值：normal w3c规范建议厂商根据字体设置一个”reasonable”的<number>类型的值，建议在 1.0 到 1.2 之间。<number> | <length> | <percentage> 下面单独解释，先看一段代码：
code
<style>
div { font-size: 20px; line-height: 30px;}
div.a { font-size: 20px; line-height: 150%;}
div.b { font-size: 20px; line-height: 1.5;}
div > p.a { font-size: 30px;}
div > p.b { font-size: 40px;}
</style>
</head>
<body>
<div>
<p class="a">Lorem ipsum dolor </p>
<p class="b">Lorem ipsum dolor </p>
</div>
<div class="a">
<p class="a">Lorem ipsum dolor </p>
<p class="b">Lorem ipsum dolor </p>
</div>
<div class="b">
<p class="a">Lorem ipsum dolor </p>
<p class="b">Lorem ipsum dolor </p>
</div> value process
| font-size | initial | declaration | cascaded | specified | computed | actual | |
|---|---|---|---|---|---|---|---|
| div | 20px | normal | 30px | 30px | 30px | 30px | 30px |
| div>p.a | 30px | normal | 30px | 30px | 30px | ||
| div>p.b | 40px | normal | 30px | 30px | 30px | ||
| div.a | 20px | normal | 150% | 150% | 150% | 30px | 30px |
| div.a>p.a | 30px | normal | 30px | 30px | 30px | ||
| div.a>p.b | 40px | normal | 30px | 30px | 30px | ||
| div.b | 20px | normal | 1.5 | 1.5 | 1.5 | 1.5 | 30px |
| div.b>p.a | 30px | normal | 1.5 | 1.5 | 45px | ||
| div.b>p.b | 40px | normal | 1.5 | 1.5 | 60px |
解释
div, div.a , div.b 元素的 line-height 的最终值(actual value)都是一样的，都是 30px, 不一样的是 computed value .
为什么 Computed value 不一样呢? 根据 line-height 的 computed value 定义：
Computed value: for <length> and <percentage> the absolute value; otherwise as specified)
对于属性值类型为 “<length>, <percentage>” 的 div ,div.a 元素, computed value 是一个绝对值，所以属性值为 30px 和 150% 都会转化为绝对值，也就是 30px; 而对于属性值为 <number> 类型的 div.b 元素的 computed value 就是 1.5。
computed value 不同会造成什么样的影响呢？ 答案是对继承有影响。根据规范的的定义：(https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#specified-value)：
If the cascade results in a value, use it.
Otherwise, if the property is inherited and the element is not the root of the document tree, use the computed value of the parent element.
Otherwise use the property’s initial value. The initial value of each property is indicated in the property’s definition.
对于没有定义且可以继承的属性，它会继承父元素该属性的 computed value；在这个例子中，由于 line-height 是可继承的, 所以对于div, div.a的子元素 p 继承的 line-height 值都是 30px, 而对于div.b的子元素 p 继承的 line-height 值是 1.5 ，从而导致了 p 元素 actual value 的不同。
