CSS深入理解之line-height

以下文字整理自慕课网——张鑫旭的《CSS深入理解之line-height》。

看到不时有人点赞收藏这篇文章，我想应该也有很多人是对line-height 和vertical-align 困惑吧，你们可以去看下这篇文章，上面有我学习vertical-align踩得坑 css中重难点整理

一、line-height的定义

line-height，又称行高，指的是两行文字基线之间的距离，又可以称为这行文字所占的高度。

定义三问：

1. 什么是基线？
2. 为何是基线？
3. 需要两行？

如图红色线即为基线

基线（baseline），指的是一行字横排时下沿的基础线，基线并不是汉字的下端沿，而是英文字母x的下端沿。基线乃*线定义之根本！ （*线指任意线）

第3个问题，一行文字难道就没有行高吗？非也，一行文字也是有行高的，两行的定义已经决定了一行的表现！
所以，行高表现为，如下图：（如果试想行高为0，那么两行文字将重合）

问题：为何line-height可以让单行文本垂直居中？

分析：真的垂直居中了吗？实际上并没有，只是我们肉眼看上去垂直居中而已！见下图：

二、 line-height与行内框盒子模型

line-height与行内框盒子模型

<p>这是一行普通的文字，这里有个<em>em</em>标签。</p>

这普通的一行包含了4种盒子，下面详解。

1、内容区域(content area)，是一种围绕文字看不见的盒子。内容区域的大小与font-size大小相关。图示如下：

2、内联盒子(inline boxes)，内联盒子不会让内容成块显示，而是排成一行。如果(文字)外部包含inline水平的标签(span、a、em、strong等)，则属于内联盒子。如果是个光秃秃的文字，则属于匿名内联盒子。图示会更清楚：

3、行框盒子(line boxes)，每一行就是一个行框盒子，每个行框盒子又是由一个一个内联盒子组成。
4、p标签所在的包含盒子(containing box)，此盒子由一行一行的行框盒子组成。

三、line-height的高度机理——深入理解内联元素的高度表现

我们来考虑文本占据的高度，见下例：

p标签的高度从何而来，是由里面的文字撑开的吗？答案：不是的，实际上这个高度是由line-height决定的！再看下例：

通过此例说明，内联元素的高度是由行高决定的！

我们需要知道：

1、行高由于其继承性，影响无处不在，即使单行文本也不例外。

2、行高只是幕后黑手，高度的表现不是行高，而是内容区域和行间距。

只不过，内容区域高度(content area)+行间距(vertical spacing)=行高(line-height)

注意：
1、内容区域高度只与字号以及字体有关，与line-height没有任何关系。

2、在simsun字体(即宋体)下，内容区域高度等于文字大小值。所以，在simsun字体下，font-size+行间距=line-height。

行间距上下拆分，就有了半行间距。

测试：font-size=240px，line-height=360px，分别计算行半间距。如图：