分析 line-height

行高和行距

line-height 是用于定于行高的css属性。什么是行高？

行高和行距

从上图可以清楚看到，一行文本对应会有四条线，由上而下分别是 顶线（top line），中线（middle line），基线（baseline），底线（bottom line）。根据这些线，可以清晰地认知：

• 行高：相邻两行基线（baseline）间的垂直距离
• 行距：上一行的底线（bottom line）和下一行的顶线（top line）的垂直距离

line-height 的取值

line-height: normal |  |  |  ;
初始值 ： normal
继承 ： 是
适用元素：几乎全部，包括伪元素::first-letter和::first-line

• line-height 初始值为normal，这个值大概等于数值上的1-1.2，因元素的font-family不同而不同。
• 取值时，应为纯数字，不带单位，最终line-height 的值等于元素的字体大小值乘以该数值，即font-size * number。
• 取值length时，应该是一个带单位的长度值，比如说em，px，rem等等。
• 取值时，是一个百分比数值，最终line-height 的值等于元素的字体大小值乘以该数值，即font-size * number。

要注意和之间的区别，它们两个计算自身的line-height方式和结果都是完全一样的，但区别就在于继承方式上，对子元素影响方式不一样。

• 使用元素得出的line-height 值会转换成length形式的px值，然后再把这个值继承给它的子元素。
  举例说，父元素设置了font-size: 20px; line-height: 150%;，父元素自身的行高就是20px * 150%，即30px。那么子元素得到的line-height属性的继承值就是30px，而非150%。（有点em的意思）
• 使用元素会先把继承给它的子元素，再由子元素自己去计算line-height值。
  举例说，父元素设置了font-size: 20px; line-height: 150%;，那么子元素line-height属性的继承值就是1.5，子元素的行高由子元素本身的font-size * 1.5得出。

因此，在实际场景中使用line-height属性使用类型的值是较好的做法，因为你不知道的继承方式会不会导致一些不可预料的错误，譬如

效果

代码

子元素字体比父元素更大时，使用继承得到的行高就显得有些不够用了，相对而言实用性更强！

line-height 的实际应用和效果

首先，要认识inline content（行内内容）、inline box（行内框）和line box（行内框），这三个概念和line-height紧密关闭！（第一个概念是我自己编的）

显示效果

代码

由上图可见：

• 蓝色框是指div的高度，也是inline box（行内框）和line box（行内框），由于inline box和line box是不可见的，所以描述对应的图不太准确，自己领会吧！
• 灰色底的区域就是inline content（行内内容）

那么inline box（行内框）和line box（行内框）有什么不一样呢？可以说，line box（行内框）是由一个或多个inline box（行内框）形成的，line box（行内框）的高度由其中高度最大的inline box（行内框）决定。继续上个例子，对a标签设置line-height: 100px;，可以得到：

a标签设置100px行高

（行内元素之间还是对齐的，因为 vertical-align的关系，迟点再学习它）

下面说说line-height和height之间的关系。
平时我们输入一对空内容的

标签时，浏览器渲染出来div的高度为0，那么当我们输入文字的时候，div就有了高度，这个高度是因为文字大小撑起来的吗？答案：不是，是由line box撑起来的。看下面个例子：

  我是div里的内容

未设置line-height时

  我是div里的内容

设置行高为1px

可以看到，高度确实是由line box撑起来的。那么，既然line-height和height之前的关系如此暧昧，我们是不是可以利用起来？
是的，比如说：多行文本在容器内的垂直居中。

多行文本垂直居中

这里有要注意的一点，就是当span的display: inline-block;去掉后，居中效果就没有了，为啥呢？答案就在于line box的数量，毕竟一行一个line box嘛，领会！
上面这个技巧，可以用于图片在容器内的垂直居中吗？答案是，NO！
开头在介绍使用元素的时候，写了“几乎全部”，那么就有一些元素对line-height是不感冒的！在这里列出来规则：

• 对于块级元素，CSS属性line-height指定了元素内部inline box的最小高度
• 对于非替代行内元素，line-height用于计算自身包含的匿名inline box的高度。
• 对于替代行内元素，如img 或其他object元素，line-height没有作用。

什么是替代元素和非替代元素？

• 非替代元素即内容即显示的元素，如div、p等等大部分元素，里面的内容会立即显示。
• 替代元素会根据元素标签，属性等决定显示内容，如img，你得有src属性，下载图片才能显示出来。

规则是在 MDN - line-height 上摘过来的，但是经过实验发现，不是所有的替代行内元素都对line-height不感冒。
要注意的是，上面 MDN 的规则中关于替代元素的描述仍然是正确的！（也许你看完后面的应该再回过头来想想）

首先说说input。input的替代性在于它的type标签，type不一样，效果和功能就完全不一样，下面是所有的input type：
input type : text | button | submit | radio | checkbox | file | hidden | image | password | reset ;
列举其中2个试验场景：
试验1：

试验1

试验2：

试验2

明显可以看到，input除了hidden类型外，其他都属于inline-block，也就是行内元素，对块级元素body设置行高，作为子元素的input会有一个相对的最小line box高度（其实是继承）。但是，对行内元素input设置行高就不一定有效了，关键在于是否拥有（匿名）行内子元素。input:text和input:password（其实file也有，不过很奇葩）都能输入文本，里面的文本内容可以看做是input的匿名行内子元素，它也可以撑开一个inline box。同理，textarea也一样，只不过textarea可换行，拥有多个inline boxes。
总而言之，就是要看容器内有没有匿名行内元素啦！