一．CSS中，line-height被用来控制行与行之间垂直距离，指两行文字基线之间的距离（baseline）,借用一张图来说明什么是基线，以及行高的定义：下图两条红线的距离，如下图：


而对于单行文本的行高：慕课网上张鑫旭老师是这样解释的：

（1）行高由于继承性，影响无处不在，即使是单行文本也不例外；

（2）行高是真正的幕后黑手，高度表现不是行高，而是由内容区域与行间距决定，而正好，内容区域+行间距=行高。因此，单行文本行高就是这样定义的。

二，行高的作用

行高决定内联盒子的高度。

（1）内容区域+行间距=行高，内容区域高度（如蓝色区域的高度），由字体及字号决定，与行高无关，行间距（蓝色区域与黑色边框的距离）=（行高-内容区域高度）/2就是上下行间距，如图9：

（2）line-height与行内框盒子模型有关

“内容区域”（contentarea），是一种围绕文字看不见的盒子，大小与字体大小有关；

“内联盒子”（inlineboxes），让内容排成一行的作用，如果有外部含inline水平的标签（span,a,em,strong等），则属于“内联盒子”，如果只是光秃秃的文字，则属于“匿名内联盒子”；

“行框盒子”（linesboxes），每一行就是一个“行框盒子”，它其实就是包裹每行文字。一行文字一个lineboxes。

所以一个没有设置height属性的div的高度就是由一个一个lineboxes的高度堆积而成的。

行内框盒子对理解line-height有什么帮助呢？

在行内框盒子（inlinebox）模型中，这个（行框盒子）lineboxes，lineboxes什么特性也没有，就高度。所以一个没有设置height属性的div的高度就是由一个一个lineboxes的高度堆积而成的。Lineboxes其实是由它里面的内联盒子里的文字啊，图片等等，谁最高就决定，高度值就是谁。

三．line-height的属性值：

1.body{line-height:normal;}

2.body{line-height:inherit;}

3.body{line-height:120%;}

4.body{line-height:25px;}

5.body{line-height:1.2}

四．Line-height的应用：

（1）单行文本垂直居中，不用设置高度，而只需设置line-height的值。若是有固定高度，则让行高等于高度值，就可以实现单行文本垂直居中。

（2）对于多行文本，没必要使用line-height，使用padding来更方便，让其父容器不固定高度。设置容器的padding上下为相同的固定值，容器的高度随着内容的增加而增加。若高度固定，用一个span标签将所有的文字封装起来，设置文字display属性（inline-block属性）,并把line-height的高度与height的高度设置一样，就可以完成垂直居中。实现代码：

父容器高度不固定时：

Css代码：

Html代码：

实现效果图：

若高度固定时：

Css代码;

Html代码：

实现效果图：

（3）图片的水平垂直居中：

Css代码：

Html代码：

代码实现效果

五，总结

这是自己学习line-height的总结，以及自己在实际中长用到line-height的地方。对与这个还会继续再学习，会继续补充或者修改些许内容。