line-height:字面含义为行高，行高有三部分组成，分为内容高度，上间距，下间距。
可以看到文本在div盒子中的默认位置是左上角。此时文字部分的行高只有内容高度在支撑，上间距和下间距都是0。鼠标在字体上滑动时的蓝色部分就是此时span元素包裹的文本的行高（和span元素的背景色尺寸相同）。
当给span中的lline-height属性设置为300px时； line-height的值默认为normal,即文本默认从左上角开始显示。
span {
....
line-height: 300px;
}
此时，刷新可以看到，蓝色部分的高度占据盒子的整个高度。蓝色部分即此时的文本的行高。
当行高line-height的大小设置等于父级元素的高度（此处是300px）时。此时 line-height的值 减去 文本内容高度后，剩余的大小，上下间距均分，刚好填满父级元素盒子的整个高度，所以就实现了文本的垂直方向上居中显示的效果了。
当 line-height 小于 父级元素高度时，比如把line-height设置为200px，如下，文本在盒子的中线上方显示。
当 line-height 小于 父级元素高度时，比如把line-height设置为400px，如下，文本在盒子的中线下方显示。
上图可以看到当行高设置的比父元素盒子还要高时，那么文本的下间距就会溢出到盒子外部去了。但是行高依然存在。行高太大，文字有可能会在盒子的外边下方。
总结：只要line-height不按默认值normal设置。那么文本的上下间距的大小都是 line-height减去文本内容高度，然后剩余部分上下间距均分。
注意：line-height 只针对单行文本，实现垂直居中显示生效。在p，span等文本元素上设置生效，在img元素上设置无效。
