CSS line-height与行内框

line-height(行高)，定义为文本行基线之间的垂直距离。一般使用line-height控制文本行距。明白line-height如何控制行距，需要了解文本基线，行内框和行框。

基线

像小学用的英语作文本一样，文本被书写在这种类似“四线三格”的结构之中。其中黑色线为顶线，红色线为中线，蓝色线为基线，绿色线为底线。

由于基线到底线的距离固定，因此line-height = 底线之间的距离，行距 = line-height - font-size。
将行距分一半为半行距，将这个半行距分别放到文本内容区的顶部和底部就形成了行内框。

行内框

每个行内元素（图中为文本）都会生成一个行内框。行内框是在概念上存在的一个矩形框，实际在页面中并不会显示出来。如图所示，可以看出行内框的高度 = 行距（上下两个半行距） + 内容区高度，而行高 = 行内框高度。

line-height通过行内元素表现，当父元素内无行内元素时，line-height不起作用。

行框

行框是由同一行中的若干个行内框组成的，行框包含了这些行内框的最高点和最低点。每一行的行框顶部与上一行的行框底部相接。

line-height控制行间距，而行间距是对于多行文本而言的。单行文本设置line-height仍然会与上下产生间距，需要我们了解行内框的概念。当设置line-height = height时可以使块级元素中的文本垂直居中，这正是因为行内元素(文本)的行框占满了整个content-box，由于上半间距和下半间距等长，文本自然居中显示。

以上仅为个人理解，如有错误之处还请指出。