CSS中，半间距 line-height font-size之间的关系
它们之间的关系可以表示为：
行间距 = line-height - 内容区域高度
内容区域：内容区域指一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质上是一个字符盒子（character box）；但是有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，因此，对于这些元素，内容区域可以看成元素自身。
实际上，内容区域并没有明确的定义，所以将其理解为em 盒（em-box，可看成是中文字符占据的1 em 高度区域）也是可以的。
大多数场景下，内容区域和em-box 是不一样的，内容区域高度受font-family 和font-size 双重影响，而em-box 仅受font-size 影响，通常内容区域高度要更高一些。除了下面这种情况，也就是“当我们的字体是宋体的时候，内容区域和em-box 是等同的”，因为宋体是一种正统的印刷字体，方方正正，所以千万不要小看宋体。
下面这张图可以说明内容区域和em-box的区别
它们之间的关系可以近似表示为：
行间距 = line-height - font-size
一般来讲，字体的line-height 大于 font-size。这时行间距为正值， 两行文字显示的时候上下留有空隙，这样排版才能好看。
行间距
CSS中，行间距分为上下两部分，
1. 由line-height的上边缘和文字内容区域的上边缘之间的距离构成
2.由文字内容区域的下边缘和line-height的下边缘 之间的距离构成
并且上下两部分高度相等，每一个部分被称为半行间距。
line-height和font-size
line-height和font-size的值是可以人为设定的
1.如果 line-height设定值 小于 font-size，行间距就会为负值。
2.当line-height为0 ，font-size为正值时，
例如 设置line-height：0 同时 设置 font-size:16px
line-height决定了文字的占据的高度空间，是line-height的上边缘与line-height的下边缘间的距离
line-height：0 时，line-height的上下边缘之间的距离就会为0，即line-height的上边缘与line-height的下边缘重合。
由于CSS中的行间距分为上下两部分，并且这两部分高度相等。
按照变化的眼光看待这个问题
初始情况：
line-height为正值 并且大于font-size值
变化过程：
line-height一直变小
最终情况：
line-height：0
可以得知
最终情况和初始情况相比，
line-height的上边缘线下来的距离和line-height的下边缘线上来的距离相等
这时 line-height的上边缘线就会和下边缘线重合，重合的位置就是初始情况下，line-height高度的一半的位置。
如果把line-height假想成一个盒子的话 ，就是初始状态下盒子的垂直中分线的位置
无论line-height盒子的高度多高，line-height为0时，line-height的上边缘线和line-height的下边缘线重合的位置都是盒子的垂直中分线的位置
