关于 行高lineheight的概念及与Vertical-align、内容框、基线等的关系

1.关于行高

行高：顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离，他也是底线和顶线之间距离

 

（1）内容区

　　　　

　　　　

内容区是指底线和顶线包裹的区域（行内元素display：inline可以通过background-color属性显示出来），实际中不一定看得到，但确实存在。内容区的大小依据　　　　font-size的值和字数进行变化。

　　

 

（2）3. 行距、行高

行高（line-height）：包括内容区与以内容区为基础对称拓展的空白区域，我们称之为行高。一般情况下，也可以认为是相邻文本行基线间的距离。

 

行距：指相邻文本行间上一个文本行基线和下一文本行顶线之间的距离。当然，也可以认为是（上文本行行高-内容区高度）/2+（下文本行行高-内容区高度）/2。

　　　　

　　　

（3）关于行高

一个空的div，<div></div>没有设置至少大于1像素高度height值时，该div的高度就是0；当打入

了一个空格或是文字，则此div就会有一个高度，但是根本不是文字撑开了div的高度，而是line-

heigh

css代码：

.test1{font-size:20px; line-height:0; border:1px solid #cccccc; background:#eeeeee;}

.test2{font-size:0; line-height:20px; border:1px solid #cccccc; background:#eeeeee;}

html代码：

 

<div class="test1">测试</div>

<div class="test2">测试</div>

结果如右图

　　

test1 div有文字大小，但行高为0，结果div的高度就是个0；test2 div文字大小为0，但是有行高，为20像素，结果div高度就是20像素。这就说明撑开div高度的是line-height不是文字内容。艾佛森退役”这5个字一行显示只有一个line boxes罩着你春哥纯爷们”这5个字竖着写，一行一个一个字一个line boxe总计五个line boxesline boxes什么特性也没有，就高度所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的

line boxes不是直接的生产者真正的活儿都是它的手下 – inline boxes干的，这些手下就是文字啦，图片啊，span之类的inline属性的标签啦。line boxes只是个考察汇报人员，考察它的手下谁的实际line-height值最高，谁最高，它就要谁的值，然后向上汇报，形成高度。

例如，<span style="line-height:20px;">取手下line-height<span style="line-height:40px;">

最高</span>的值</span>。则line boxes的高度就是40像素了。

把line-height设置为您需要的box的大小可以实现单行文字的垂直居中；”实现高度不固定的文字垂直居中使用padding就好了。对于高度固定的div，里面文字单行或多行显示，字体大小有大有小方法之一就是借助于line-height。

实现高度不固定的文字垂直居中使用padding就好。对于高度固定的div，里面文字单行或多行显示，字体大小有大有小的情况怎么办呢？方法之一就是借助于line-height。

.mulit_line{line-height:150px; border:1px dashed #cccccc; padding-left:5px;} .mulit_line span{display:-moz-inline-stack; display:inline-block; line-height:1.4em; vertical-align:middle;} .mulit_line i{width:0; display:-moz-inline-stack; display:inline-block; vertical-align:middle; font-size:0;}

html代码：

<p class="mulit_line">

<span style="font-size:12px;">这里是高度为150像素的标签内的多行文字，文字大小为12

像素。

<br />

这里是第二行，用来测试多行的显示效果。

</span>

<i>&nbsp;</i> </p>

.article_box *{line-height:150%;}不会出现文字重叠的情况网易博客就是使用的这个方法。但是使用“*”通配符大大增加了css的渲染，效率低，而且有更好的方法，就是使用数值。150%虽然和1.5在值上是一样的，但是它们也是有差别的，差别在于继承性，使用百分比会计算line-height的值，然后以px像素为单位继承下去，而1.5则是先继承1.5这个值，遍历到了该标签再计算去line-height的像素值。所以同样的效果只需要.article_box{line-height:1.5;}就可以实现了。如果line-height是相对单位，例如line-height:1.6或者line-height:160%之类，也可以使用font-size间接控制，比方说来个狠的，font-size设为大鸡蛋0, 本质上还是改变line-height值.

任意尺寸的图片（或者内联块状化的多行文字）的垂直居中效果

div { line-height: 240px; } img { vertical-align: middle; }

上面的效果并不是完全的垂直居中，只是近似

高度行高撑开，其垂直中心是字符content area的中心，而对于字符x而言，都是比绝对中心位置要下沉的（不同字体下沉幅度不一样），换句更易懂的描述就是x的中心位置都是在字符内容区域高度中心点的下方，而这上下的偏差就是这里图片上下间距的偏差。

我特意把字符x使用大字号演示了下：

　　　　　　

换句更简单的话说就是：middle中线位置(字符x的中心)并不是字符内容的绝对居中位置。两个位置的偏差就是图片近似居中的偏差。

font-size:0, 因此此时content area高度是0，各种乱七八糟的线都在高度为0的这条线上，绝对中心线和中线重合。自然全垂直居中：

div { line-height: 240px; font-size: 0; } img { vertical-align: middle; }

（4） 行内框

　　　　

行内框是一个浏览器渲染模型中的一个概念，无法显示出来，但是它又确实存在，它的高度就是行高指定的高度。

（5） 行框

　　　　

行框（line box），同行内框类似的概念，行框是指本行的一个虚拟的矩形框，也是浏览器渲染模式中的一个概念。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度）。

Vertical-align:垂直居中

上一节我们讲解了行高与单行纯文字的垂直居中（line-height），而如果行内含有图片和文字，在浏览器渲染出来后，读者可以发现文字和图片在垂直方向并不是沿中线居中，而是沿基线对齐。这是因为，元素默认的垂直对齐方式为基线对齐（vertical-align: baseline）。