定义
line-height属性设置行间的距离，基线之间的距离，不同字体，基线位置不同。
line-height的属性
normal:默认值，设置合理的行间距，跟浏览器相关。实际开发中，对行高reset,保证各个浏览器的兼容性一致。number:设置一个数字，则会跟当前的字体尺寸相乘设置行间距。举例:line-height:1.5, 那么实际行高=1.5*font-size 。有单位的值（px,em,rem):设置固定的行间距。%：基于当前的字体尺寸的百分比的行间距，100%与1em相同。inherit：规定应该从父元素继承line-height属性的值举例：
<style> .demo1 {line-height: 150%;font-size: 16px;border:1px solid #ddd;}.demo1 div {font-size: 30px;}.demo2 {line-height: 1.5;font-size: 16px;border:1px solid #000;}.demo2 div {font-size: 30px;}</style></head><body><div class="demo1">父元素内容<div>web前端开发<br>line-height行高问题</div></div> <div class="demo2">父元素内容<div>前端开发<br>line-height行高问题</div></div> </body>
案例解析：
1）demo1总高度为74，父元素行高为150%(1.5em)时，会根据父元素的的字体大小先计算出行高值，然后再让子元素继承。所以当line-height:150%时，子元素的行高等于16px * 150% = 24px; 子元素共有两行，24*3+2
2）demo2总高度为116， 当父元素行高为1.5时，会根据子元素的字体大小动态计算行高值让子元素继承。所以，当line-height:1.5时，子元素行高等于30px * 1.5 = 45px; 45+45+24+2
浏览器支持
所有的浏览器都支持line-height属性
作用
line-height会影响行框的布局。在应用到一个块级元素时，它定义了元素中基线的最小距离。
line-height的高度机制原理
内联元素的高度由行高决定行距 = 内容区域的高度 + 行间距font-size+行间距 = line-height多行文本的高度 = 单行文本高度累加利用行高实现垂直居中
单行文字的垂直居中对齐把line-height = height
2.多行文字的垂直居中
1）父元素：height = line-height
2）子元素：设置合适的line-height,并且设置display:inline-block，vertical-align:middle
案例：
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>css居中对齐</title><style> *{padding: 0;margin:0;font-size: 12px;} div{float: left;width: 200px;height:200px;margin: 10px;border:1px solid#ccc; line-height: 200px;} span{display: inline-block;vertical-align: middle;line-height: 22px;}</style></head><body><div> <span>单行文字垂直居中显示</span> </div> <div> <span>多行文字垂直居中显示 <br/> 多行文字垂直居中显示<br/> 多行文字垂直居中显示<br/> 多行 文字垂直居中显示<br/> 多行文字垂直居中显示<br/> 多行文字垂直居中显示</span></div></body></html>
补充：css vertical-align
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐，允许指定负长度值和百分比值(vertical-align: 4px;vertical-align: 20%;)，这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
注意：
vertical-align属性应该设置到行内或行内块元素上如果文字的总高度超出了容器的高度，则垂直居中会失效，IE7以下，span 尾标签和内部内容不能有间隔空白，也就是说span的尾标签和内容要连在一起。
