转自：https://blog.csdn.net/liuzijiang1123/article/details/77499001?locationNum=9&fps=1
今天学习了一下line-height这个属性，然后试着自己总结一下
参考文章:http://www.imooc.com/article/7767
http://www.cnblogs.com/tinyphp/p/5367420.html
1.对于line-height，首先贴一下W3C上的解释：
定义和用法
line-height 属性设置行间的距离（行高）。
注释：不允许使用负值。
说明
该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
根据下面这张图片，我们可以知道，行高是基线之间的距离，然后我们仔细观察一下也就是两根绿色线之间的距离，绿色线与顶线的距离叫做上间距，与底线之间的距离叫做下间距；
这个上下间距的求法是这样的：line-height减去font-size再除以2，就分别为上下间距的值；
看到这个地方，我们就可以联想到line-height的另一个作用了：设置块级元素中文字垂直居中，例如<li>中的文字，通常用来做导航；
我们只需要设置line-height和height相等即可；
文字垂直居中的效果，从肉眼上看出来其实就是文字在块级元素中上下边距都一样，也就是文字离块级元素边框的上下边距一样；
2.然后就是line-height中设置属性的区别：
自己看完文章后的感受就是：line-height设置数字（例如1.5）或normal（默认值，通常是1.2）与其他值（例如150% 1.5em 40px）的区别在于其子元素的line-height会不一样；
在子元素不设置line-height的情况下：
前者的line-height是“动态”：只会继承父元素的line-height设置的数字，然后用这个数字乘以自己的font-size成为自己的line-height。
其他的则为"固定"的：直接继承父元素的line-height（30px）或者是line-height（150%,1.5em）乘以父元素的font-size.
直观的感受就是如果有两行文字，前者不会重叠，后者如果line-height小于font-size则会重叠；
总的来说设置line-height的时候最好用数字或者normal;