49. 行高的取值 {ignore}

[toc]

1. px, 像素值

  1. line-height: 30px;

行高为 30px，是写死的。

2. 无单位的数字

line-height: 2;

表示行高为字体大小的两倍。

注意：先继承，后计算。

示例：

<div>
    <p>dahuyou</p>
    hahaha
</div>

假设，当前的 div 的 font-size 是 16px，p 的 font-size 是 20px；那么，如果给 div 设置了 line-height: 2; 那么最终结果为：

  • div 的 line-height 是 32px
  • p 的 line-height 是 40px

3. em单位

line-height: 2em;

表示行高为字体大小的两倍。

注意：先计算，后继承。

示例：（同一个示例）

  • div 的 line-height 是 32px
  • p 的 line-height 是 32px

4. 百分比

同3。

小结

需要理解2、3、4之间的区别（面试的时候也许会问）。