字体高度，行高，行距，半行距
字体高度就是顶线到底线的距离,我们，一般字体高度会大于或者等于字体大小，不同的字体会有差异。下图中我们虽然把字体设置为20px，但是字体区域的高度却是28px。

行高就是line-height对应的值，行高是两行文本基线之间的距离
行距是两行文本之间第一行的底线到第二行顶线的距离

由此我们可以推断出计算公式
行距 = 行高- 字体高度

半行距：行距/2，我们上面说了行高是两行文本的基线的距离，那如果只有一行文字，行高从何说起呢？
观察下面第一个截图，span里只有一行文字
字体高度是28px
行高是 4*20px = 80px;
观察下面第二个截图：p的高度等于内部span的行高 80px
那在p和span之间的上下空白区域的高度是多少的？
其实就是半行距 = （80-28）/2 = 26px，在单行文本下，文字高度+上面的半行距+下面的半行距 等于行高

截图1:

截图2:

内容区，行内框，行框，
内容区的高度是由上述字体高度决定的, 如下图span的28px
行内框默认等于内容区域，除非设置了padding。
行框是一行区域渲染的一个框模型，由其内部行内元素的行高line-height决定，比如下图2p高度20px，是由于他内部的span的line-height为1，也就是20px。（注意p上加了font-size:0 是为了排除block元素内部隐藏文本的默认行高对实验的干扰），这个问题另外文章再做分享。