line-height的认知

line-height的认知

之前对line-height的认知 大概就是 文字都贴在一起不好看，所以用line-height。没有对它有过研究，前几天遇到个 按钮中文字居中问题。也让我顺便学学 line-height。

• line-height是什么
• 属性有什么
• 属性值为数值和其它的差别
• line-height代替height

---

line-height是什么

它是 行间距离 也就是行高。

说到行高我们简单说下 baseline这个概念。图中显而易见，浅蓝色的基线。文本行的基线之间距离就是行高 line-height啦。

原文图片参考
行间距当然就是下面的概念：

line-height属性

line-height属性　如下表：

属性名称	属性值
normal	默认。设置合理的行间距。一般是1.2
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距 比如 40px
%	百分比，基于当前字体尺寸的百分比行间距。
inherit	继承父元素的行间距

属性值为数值和其它的差别

设置 line-height：180%，和line-height：1.8 设置对于 class为word-wrap 这个div来说 行间距是 用font-size 24px 乘以 180% 或1.8 都没错。但问题会出现的是 行间距是继承的属性，对于p标签来说，它爸爸给它带来的影响就不同了。

数值的属性继承 有个缩放因子的概念。

p标签继承过来 继承的是缩放因子 1.8，而不是 计算后的数值 24*1.8，当然 设置180%，p标签继承过来的就是计算好的 line-height数值。

line-height代替height

html代码：

<div class="test1">测试</div>
<div class="test2">测试</div>

css代码：

.test1{font-size:20px; line-height:0; border:1px solid #cccccc; background:#eeeeee;}
.test2{font-size:0; line-height:20px; border:1px solid #cccccc; background:#eeeeee;}

另外，line-height还有居中属性。

---