概述

行内元素的盒子模型

对于非替换行内元素：
width、height不生效。
padding、border、margin不影响行高。
垂直方向的padding、border、margin不影响其他元素的排版，但是影响展示（层叠覆盖）。
水平方向的padding、border、margin影响同行其他元素的排版。

对于替换行内元素：
受width、height、padding、border、margin影响，也影响其它元素。

4个重要的概念：

1. containing-box，包裹行内元素的块元素
2. line-box，又叫行框，表示块元素里的一行
3. inline-box，又叫行内框，行框里可以包含若干个行内框
4. content-area，又叫内容区，行内框里的展示内容

它们的关系是：containing-box包裹着line-box，line-box包裹着inline-box，inline-box包裹着content-area。

两个块元素的重要属性：

1. font-size
2. line-height

两个行内元素的重要属性：

1. line-height
2. vertical-align

两条重要的规律：

1. 对于非替换元素元素，内容区总是垂直居中于行内框，这也是半行距上下分布的原因。而替换行内元素的内容区就是它的盒子模型（包括width、length、padding、border、margin），等于行内框高宽，所以也算垂直居中。

2. 而行内框默认都是垂直对齐于父元素字体的baseline。

运作原理

当我们创建一个块元素，并给它附上两个css属性，font-size和line-height（如果省略了line-height，默认为font-size的1.2倍，不同浏览器可能不同），这就相当于给块元素的每一行的行框设置了默认的样式。这有什么用呢？line-height给出了vertical-align（垂直对齐）的top和bottom的位置，font-size给出了vertical-align（垂直对齐）的text-top、super、middle、baseline、sub、text-bottom。

块元素中的行内元素会根据自身的line-height和vertical-align，并参考块元素的line-height和font-size，来对齐定位和撑开行框的上下边界。

在排版过程中：
一行的行框的上下边界被撑大了，对齐vertical-align的bottom的元素会随着行框下边界的位置发生位移；
原font-size定义的垂直对齐位置（vertical-align的text-top、super、middle、baseline、sub、text-bottom）发生改变的话，相应的行内元素也会随着发生位移。

相关概念解析

1. line-box（行框）

行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度），当有多行内容时，每行都会有自己的行框。

也就是说，CSS没有提供可以操作行框的属性，它是由浏览器渲染得来的。

2. inline-box（行内框）

行内框通过向内容区增加行间距来描述。
对于非替换行内元素，行内框的高度刚好等于line-height的值；
对于替换元素，元素行内框的高度恰好等于内容区的高度，因为行间距不应用到替换元素。

也就是说，像span之类的非替换行内元素可以由line-height来设置行内框。

3. content-area（内容区）

非替换行内元素中，内容区就是由元素中字符描述的框。
替换元素中，内容区的高度是元素的固有高度加上内外边距和边框值。

4. 行间距

非替换行内元素中，行间距是值line-height和font-size值之差。这个差会分为两半，分别应用于内容区的的顶部和底部，行间距只应用于非替换元素。
替换元素中，没有行间距。

5. line-height（行高）

对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的inline元素，它用于计算行盒（line box）的高度。

6. 垂直对齐

指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
有如下值：

baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>

相对父元素的值：
text-top，元素顶端与父元素字体的顶端对齐。
super：下标，元素基线与父元素的上标基线对齐。
middle，元素的中心与父元素的基线加上小写x一半的高度值对齐。
baseline（默认），元素基线与父元素的基线对齐。
sub：下标，元素基线与父元素的下标基线对齐。
text-bottom，元素底端与父元素字体的底端对齐。

<length>，使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。
<percentage>，使元素的基线对齐到父元素的基线之上的给定百分比，该百分比是line-height属性的百分比。可以是负数。

相对行的值：
top：元素及其后代的顶端与整行的顶端对齐。
bottom：元素及其后代的底端与整行的底端对齐。

参考

CSS vertical-align属性详解
CSS行高——line-height