line-height这个样式相信大家一定不会陌生，我们经常用它来让文本上下居中，这样做一般不出出现什么问题，但是如果对这个属性不是很熟悉的话，可能会踩到一些坑，今天亲自去试验了一下，并总结了一下line-height的几个特性。
首先line-height有以下几种标准的写法:
写法1、line-height:normal; //等价于写法5，固定值为数字1.2
写法2、line-height:inherit; //父元素继承，（默认继承父元素行高）
写法3、line-height:24px; //通过像素px或者em等单位赋值
立即学习“前端免费学习笔记（深入）”；
写法4、line-height:150%; //line-height=font-size*1.5
写法5、line-height:1.5; //line-height=font-size*1.5
首先看一下写法3可能存在什么问题，如图：
可以看出，父元素设置行高，而子元素如果没有设置行高，那么子元素会采用父元素设置的line-height，不管子元素的font-size多大，都不会改变行高，所以当子元素font-size>父元素line-height的时候，会出现字体重叠或者其它不想看到的样式。
其次写法4和5看起来虽然一样，却有不同之处，如下图：
上面两种写法都会得到同样的效果，如图：
现在把子元素字体增大一倍
通过百分比设置的行高，line-height = 200%*父元素 font-size = 32px，子元素行高不会发生变化，导致字体重叠
通过数字设置的行高，子元素的行高会重新计算，line-height=父元素行高比例因子*子元素font-size=2*64=128px;子元素行高会重新计算
到这总结有以下几点
line-height具有继承性(inherited)。
元素设置了line-height等于像素值px或者em时，那么他的子元素（没有设置行高的子元素）会采用父元素的line-height，并且不会因为字体大小而改变本身的行高。
line-height会根据父元素设置的方式，确定自身行高是否重新计算。即写法4和5的区别
相信到这里你已经对line-height有一定的了解了
