line-height和vertical-align在 CSS 开发中是比较常用的，但用起来也并不简单，比如在使用中常常会碰到某些特殊字体进行混排或文字对齐图标的情况，也许会发现，无论使用哪种方法，总是感觉文字或图片向上或向下偏移了几像素，不得不专门对它们进行位移；或者还有在使用vertical-align:middile不能实现垂直居中等等，为什么会出现这些情况呢？接下来我们详细说说。

先来一起学习一下几个与line-height和vertical-align相关的概念。

基线

图中从上到下的线分别是顶线(top line）、主线(mean line)、中线(middle line)、基线(baseline)、底线（bottom line），很像我们刚学英语字母时的四线三格，我们知道vertical-align属性中有top、middle、baseline、bottom，就是和这几条线相关。

基线是西文字体设计与排版的概念，源自西文字母的主体底部（字母E的底部）对齐的位置。

对于中文字体，本身的设计上没有基线等说法，每个字都在一个方形盒子中。但是在计算机上显示时，也在一定程度上沿用了西文字体的概念，通常来说，中文字体的方形盒子中文字体底端在基线和底线之间，顶端在顶线下一点。

行高、行距、半行距和x-height

行高：也就是line-height，指文本行基线间的垂直距离。上图任意两条相同颜色的垂直距离也是行高。

行距：是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。

半行距：行距的一半。半行距 = (行高 - 字号) / 2。在 CSS 中的margin-top不是从文字的顶线算起，而是从顶线半行距的上方开始算起。同理，margin-bottom是从底线半行距的下方开始算起。

x-height：x字高，是指字母的基本高度，精确地说，就是基线baseline和主线mean line之间的距离。

font-size

前端开发中我们会使用font-size来设置文字的大小，假设我们设置的字体是 12px，就代表着顶线和底线的距离为12px。

在 CSS 中有四种内联盒子，分别是：包含框containing box，行框line boxes，行内框inline boxes，内容区content area。

line-height行高是指文本行基线之间的距离。行高line-height实际上只影响行内元素和其他行内内容，而不会直接影响块级元素，也可以为一个块级元素设置line-height，但这个值只是应用到块级元素的内联内容时才会有影响。在块级元素上声明line-height会为该块级元素的内容设置一个最小行框高度。

line-height是可以继承的。父元素不同的行高单位影响子元素的继承。例如：

在线demo >>

为了引出line-height与line boxes，先说一下大家常见的现象。有一个空的，在没有设置height值时，该div的高度就是0。如果该div里面打入了一个空格或是文字，则此div就会有一个高度。那么大家思考过没有，为什么div里面有文字后就会有高度呢？

可能有人会跟认为是：文字撑开的！文字占据空间，自然将div撑开。我一开始也是这样理解的，但是事实上，深入理解inline模型后，发现根本不是文字撑开了div的高度，而是line-height！要证明很简单(如下测试代码)：

在线demo >>

到底这个line-height行高怎么就产生了高度呢？在inline box模型中，有个line boxes，这玩意是看不见的，这个玩意的工作就是包裹每行文字。所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的。

属性vertical-align影响一个内联级元素垂直方向上的布局。具体适用于display值为inline，inline-block或table-cell的元素。

需要注意的是：除了 top 与 bottom 是使元素相对于行内元素垂直对齐外，其他属性值都是相对于父元素。所以，在开发时，我们只需要关注当前元素和父级，两元素前后并没有直接影响。

top

在线demo >>

上图中，“子元素Aa”的vertical-align设置成top，那么它就与当前行框（line boxes）里最高元素的顶端相对齐，顶端是包括margin值的。

text-top

在线demo >>

上图中，父元素字体是50px，那么与之相同“子元素Bb”的字体也是50px, 所以可以看成是与“子元素Bb”的顶部对齐。

bottom与text-bottom和top与text-top区别同理。

接下来通过一些列子来看看日常开发中与line-height和vertical-align相关的一些现象。

先看看代码：

在线demo >>

看一下效果：

仔细看图片下发有一段距离的空隙，为什么会出现这个空隙呢？

在文章前边的内容中我们学习了元素默认情况下的对齐方式是通过基线baseline对齐；而在浏览器中都有默认的字体的大小，这个空隙就是来源于这两个。如果给父元素设置个更大的字号，这个空隙也会变得更大。为了方便观察，我们添加个匿名inline boxes（即没标签的裸露的文字），结果如下图，

vertical-align:middle这个属性值大家在平时开发中用得算是最多的了。先看一下下面的例子：

在线demo >>

上图中，灰色背景为父元素；黄色线为父元素的垂直中线；绿色线为x所在的基线，也就是父元素的基线；蓝色线为红色图片的垂直中线，且红色图片设置了middle的对齐方式。按照定义就是：蓝色线与绿色线往上二分之一x-height的高度所在的线对齐，也就是字母x的中心点。如果绝对居中的话，黄蓝两条线应该完全重合。

为什么会产生这种现象呢？主要原因在于文字具有下沉特性（就是文字的垂直中心点在文字所在区域的中线往下沉一点，不同字体的文字下沉的幅度不同），从而导致蓝线无法绝对与黄线对齐。当文字大小足够小时，我们可以忽略。从而近似的实现居中效果。但是文字越大，影响就越明显。

那对于这样的问题我们要怎么解决呢？以下提供两个思路（当然还有可能有其他更好的方案）：

1、采用Flex布局中的align-items属性，使子元素和父元素在垂直轴上居中对齐。代码也比较简单：

html代码同上。

在线demo >>

2、 图中“x”字母（没标签的裸露的文字）可以受具有继承特性的CSS属性影响，于是，我们可以通过其他设置来做调整，让字符的中线和字符内容中心线在一起，或者说在一个位置上就可以了。设置父元素font-size:0, 因此此时content area高度是0，各种上面提到的线（基线、顶线、主线、底线等）都在高度为0的这条线上，绝对中心线和中线重合。如下：

在线demo >>

本篇文章首先讲解了文字相关的一些基本概念和四种内联盒子的关系，以及line-height和vertical-align的基本属性和常见的各种表现，同时对一些实际应用中常见的现象做了简单的分析阐述，并为解决此类问题提供了思路。作者最后得出：