先看一张来自维基百科的图，上面都是字体排印学的术语
来自维基百科
在字体排印学(CSS中的字体同样遵循字体排印学)中，基线指的是多数字母排列的基准线。
东亚字体(包括中文)没有基线，每个字符坐落在一个方形盒子中，既无升部也无降部。当它与具有低基线的字体混合使用时，东亚字符应当被调整，使其字符底部在低基线字体的基线和降部高度之间。
基线是存在于字体中的一条基准线，和字体有关。
x-height在西文字体排印学中，x字高(英语：x-height或corpus size)是指字母的基本高度，精确地说，就是基线(baseline)和主线之间的距离，即小写字母x的高度。
在西文的具体字体以及排版术语中，x字高通常被称为一个ex，这和把大写字母M的宽度称为一个em的习惯类似。 (终于知道CSS中的em单位的含义了)
em是字体排印学的计量单位，相当于当前指定的点数。
em最初表示的是字体中大写M的宽度及所用的尺寸。
在CSS中，单位em是字体点数或英寸数在名义上的高度。
em框在字体中定义(也称为字符框(character box))。
实际字形可能比em框更高或更矮(所有例子中的“p”字母)， font-size的值确定了各个em框的高度。
下面用边框模拟了em框，虚线代表了各个字符的em框:
下面的两行文字中的“p”解释了“实际字形可能比em框更高或更矮”
在非替换元素中，内容区域是元素中各字符的em框串在一起构成的框，即顶线和底线所包裹的区域。
在替换元素中，内容区域是元素的固有高度再加上可能有的外边距、边框或内边距。
下面灰色的背景模拟了内容区：
行间距 = line-height - font-size 这个差值实际上要分为两半，分别应用到内容区域的顶部和底部。
行间距只应用于非替换元素
下面的灰色区域模拟了内容区域，黄色区域分别模拟半个行间距：
行内框 = line-height
这个框通过向内容区域增加行间距来描述
对于替换元素行内框刚好等于内容区的高度。
下面两条红线之间描述了行内框：
包含该行中出现的行内框的最高点和最低点的最小框。
即：行框的上边界要位于最高行内框的上边界，而行框的底边位于最低行内框的下边界。
当将“内容区”示例中的图片放大时，两条红线的距离变大了
这两条红线模拟了行框的区域，如下例所示：
为什么文本上面会留有空隙，图片下面会留有空隙，正常来说完全可以将两个空隙压缩掉？
原因在于垂直的默认对齐方式是基于基线对齐的(vertical-align: baseline;)，而替换元素的基线位于元素的下边缘。
行内元素的边框边界由 font-size而不是 line-height控制。 换句话说，如果一个 <span>的 font-size: 12px; line-height: 36px; 其内容区就是 12px 高，边框将包围该内容区域。
内边距和边框不改变行高
外边距不会应用到行内非替换元素的顶端和低端，不过会作用于左右两端
当line-height的值有单位时，继承的是父元素计算之后的值，即在父元素上计算
同上面的1em，继承的是父元素计算之后的值，即在父元素上计算
当line-height的值无单位时，是继承值(缩放因子)而不是计算值，即在当前子元素上计算
vertical-align 不影响块级元素中内容的对齐，可以影响表格单元的垂直对齐方式
baseline当前元素的基线与父元素的基线对齐
如果该元素没有基线(例如img、input)，则以该元素的底端与父元素的基线对齐
上面这个示例中： font-size: 60px; line-height: 1em; 两条虚线代表了行框，行框的高度大于了60px?
原因在于“font-size: 20px”的行内框元素也继承了line-height的值，行框包含了最高元素和最低元素
将元素行内框的顶端/底端和包含该元素的行框的顶端/底端对齐
将元素行内框的顶端/底端和父元素内容区的顶端/底端对齐
将元素行内框的垂直中点与父元素基线上方0.5ex处对齐
这也解释了为什么middle之后的元素并不位于行框的中间
将元素上/下移一定的距离，这个距离由相对于元素的 line-height 值计算的