line-height 顾名思义就是 行高，是用来设置行间的距离，她确实是发挥这样着作用，但单单这样的去理解却也太过于粗浅了。

首先，具体先了解一下一些相关的概念。想一想在我们在刚开始学习英语课时，老师在黑板上画了四条线，这四条线是英文字母用来书写时的4根横向的平行线，而 vertical-align 中的 top , middle , baseline , bottom 就是基于这样的概念。

接下来我们看看 MDN 对 line-height 的描述，他是这样的：

The line-height CSS property sets the amount of space used for
lines, such as in text. On block-level elements, it specifies
the minimum height of line boxes within the element. On non-
replaced inline elements, it specifies the height that is used
to calculate line box height.

line-height CSS 属性用于设置多行元素的空间量什么的，这些什么的先不考虑。在上面说明中，涉及到两个很重要的概念，line boxes 和 inline boxes 。

inline boxes模型

我们先说说 inline boxes ，不过在这之前我们的先聊下盒子。说到盒子，我们很容易联想到 block 的块级盒子，inline 行内盒子，以及两者之间的 inline-block 的行内块级盒子。他们的形成也是因为我们使用了所对应的标签，而这些是我们所知很容易了解到的。但请想一想，在这之下是否还有盒子存在呢？例如我们写在盒子中的文字属于盒子吗？属于哪种盒子？

是的，他们属于盒子。我们都知道行级盒子是在同行进行排列的。一行内这些盒子无论大小都是 inline boxes 。由 inline-block 和 inline 生成的是具名的 inline box ，而文字则是匿名的 inline box 。

line boxes模型

在了解了 inline boxes ，先不着急，先了解 line boxes 。不过 ，line boxes 到底是个啥呢？

简单来说 line box 就是包含一行内若干个 inline boxes 的盒子。而这些 inline boxes 中最高的盒子会撑起 line box 的高度。没有指定高度的块级元素和行内块级元素其高度就是由这些 line boxes 累积堆起来的，而除此之外，line boxes 不具有其他特性。

line-height与line boxes高度

在知道上面的两个概念之后，我们来探讨一些相关的问题。

一个空的 div 在没有设置至少大于1像素高度 height 值时，他的高度为0。但如果在里面输入一个文字后，div 却拥有高度了。可为什么 div 里面有文字后就会有高度呢？

可能有人会觉得是因为文字大小关系，文字占据空间，从而使 div 拥有了高度。然后事实确是，文字并没有撑开了 div 的高度，而是 line-height ！

结果是显而易见，是 line-height 撑开了 div 的高度。如果你还是感到疑问，还可以看看下面的例子，通过结合上面所说的两个模型更加容易理解。

line-height与img被div包裹产生的空隙

相信大家在撰写样式的过程中，一定遇到过这个现象，用 div 包裹着一张图片， div 却并没有将其完美的包裹起来，而是留有一条小小的空隙。那么，为什么发生这种现象呢？

通过上面的概念我们就明白这是为什么了。首先我们知道 img 即是行内元素也是可替换元素(Replaced Element)，在默认时，文本是按照基线进行对齐的，img 在这里是独居一行的 line box ，而 line boxes 通过 line-height 撑起了盒子的高度，同时由于 img 是可替换元素，拥有着自己的 height ，两者加算，就产生出了空隙。

解决方法也很简单，换一种对齐方式就可以解决这个问题了。line-height: 0 也行，但可能会引发诸多问题。

结语

本文主要讲述了一些自己对 line-height 和 inline box 模型的理解，对 line-height 的基础的知识并没有进行累述，如果有纰漏之处，欢迎指正。还有兴趣想了解更多相关知识的，可以看看张鑫旭大神的《CSS世界》，里面有更加详细的讲解。