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的下边缘线重合的位置都是盒子的垂直中分线的位置