【line-height】 line-height详解

1，line-height是什么？

w3school定义使用line-height属性定义行与行之间的距离。也就是一个行的行高。

【它不允许使用负值。使用在文本行的时候line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。】

行高指的是文本行的基线间的距离。而基线（Base line），指的是一行字横排时下沿的基础线，基线并不是汉字的下端沿，而是英文字母x的下 端沿，同时还有文字的顶线（Top line）、中线（Middle line）和底线（Bottom line），用以确定文字行的位置，如图7-17 所示。

行高与字体尺寸的差称为行距（leading），如图所示。注意不要把行高和行距弄混淆。

2，line-height语法：

line-height属性的具体定义列表如下：

语法： line-height : normal | <实数> | <长度> | <百分比> | inherit
说明： 设置元素中行的高度。
值： normal：默认行高，一般为1到1.2； 实数：实数值，缩放因子； 长度：合法的长度值，可为负数； 百分比：百分比取值基于元素的字体尺寸。
初始值： normal
继承性： 继承
适用于： 所有元素
媒体： 视觉
计算值： 长度和百分比值为绝对值；其他同指定值。

3，content area ，inline box 和 line box（内容区域，行内框和行框）

框 和对应的高度：

1）内容区域和字体尺寸

理论上讲，一行中的每个元素都有一个内容区域，它是由字体尺寸决定的。

图 内容区域

2）行内框与行高

行内元素会生成一个行内框（inline box），行内框只是一个概念，它无法显示出来，但是它又确实存在。

在没有其他因素影响的时候，行内框等于内容区域，而设定行高则可以增加或者减少行内框的高度，即：将行距的值（行高-字体尺寸）除以2，分别增加到内容区域的上下两边。

给行内元素设置border也只能轮廓出内容区域。

图 行内框与行高

由于行高可以应用在任何元素上，因此同一行内的若干元素可能有不同的行高和行内框高，例如有如下代码，其显示如图所示。

<p style=”line-height:20px;”>

行高20px。

<strong style=”line-height:50px;”> 行高50px。</strong>

<span style=”line-height:30px;”>行高30px。</span>

图 行内框与行框

3）行框与行框高

这里又有一个新的概念——行框（line box）。同行内框类似，行框是指本行的一个虚拟的矩形框，其高度等于本行内所有元素中行高最大的值。

如果一行内所有的行高一样大时，行框的高度就和行内框的高度一样。

因此，当有多行内容时，每行都会有自己的行框，如图7-22所示。



图 多行内容的行框

提示：理解行框和行内框的概念对于学习本章[7.4垂直对齐：vertical-align属性]一节的内容非常重要。
注意：行框的高度只同本行内元素的行高有关，而和父元素的高度（height）无关。

4）行内框与行框，决定文字高度

css中起高度作用的应该就是height以及line-height！如果一个标签没有定义height属性(包括百分比高度)，那么其最终表现的高度一定是由line-height起作用，即使是IE6下11像素左右默认高度bug也是如此。

先说一个大家都熟知的现象，有一个空的div，<div></div>，如果没有设置至少大于1像素高度height值时，该div的高度就是个0。如果该div里面打入了一个空格或是文字，则此div就会有一个高度。那么您思考过没有，为什么div里面有文字后就会有高度呢？

这是个看上去很简单的问题，是理解line-height非常重要的一个问题。可能有人会跟认为是：文字撑开的！文字占据空间，自然将div撑开。我一开始也是这样理解的，但是事实上，深入理解inline模型后，我发现，根本不是文字撑开了div的高度，而是line-height！要证明很简单(如下测试代码)：

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>

结果如下图(windows IE6浏览器下)：

结果是如此的显而易见，test1 div有文字大小，但行高为0，结果div的高度就是个0；test2 div文字大小为0，但是有行高，为20像素，结果div高度就是20像素。这就说明撑开div高度的是line-height不是文字内容。

到底这个line-height行高怎么就产生了高度呢？在inline box模型中，有个line boxes，这玩意是看不见的，这个玩意的工作就是包裹每行文字。一行文字一个line boxes。例如“艾佛森退役”这5个字，如果它们在一行显示，你艾佛森再牛逼，对不起，只有一个line boxes罩着你；但“春哥纯爷们”这5个字，要是竖着写，一行一个，那真是够爷们，一个字罩着一个line boxes，于是总计五个line boxes。line boxes什么特性也没有，就高度。所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的。

4，行高的计算与继承

以em、ex和百分比为单位的行高，其基数是元素本身的字体尺寸。

1）例如有代码如下：

<p style=”font-size:20px;line-height:2em;”>

字高20px，行高2em。

</p>

 <p style=”font-size:30px;line-height:2em;”>

字高30px，行高2em。

</p>

2个段落的行高都为2em，但是字体大小不同，因此显示如图7-23所示。


图7-23 行高的计算


2）行高可以设定得比字体高度小，此时多行的文字将叠加到一起，例如有如下代码，其显示如图7-24所示。

p { font-size : 20px; line-height :10px; }

<p>字高20px，行高10px。此时多行的文字将叠加到一起。</p>

图7-24 比字体高度小的行高

3）行高是可继承的，但是继承的是计算值，例如有如下代码：
p { font-size :20px; line-height : 2em; }
p span { font-size : 30px; }

<p>字高20px。<span>字高30px。</span></p>

<p>元素的行高2em，字体尺寸为20px，因此计算值为40px，虽然<span>元素本身的字体尺寸为30px，不过其继承的行高仍为40px。但是在不同的浏览器内显示的效果却不尽相同，如图7-25所示。


图7-25 行高的不同表现

4）由于继承的是计算值，因此当元素内的文字字体尺寸不一样的时候，如果设定固定的行高很可能造成字体的重叠，例如有如下代码，其显示如图7-26所示。

p { font-size : 20px; line-height : 1em; }
p span { font-size : 30px; }

<p>字高20px，行高1em，当文本为多行时可能会发生文字重叠的现象。<span>字高30px。</span></p>


图7-26行高继承造成文字叠加

为了避免这种情况，可以为每个元素单独定义行高，但是这样很烦琐，因此可以定义一个没有单位的实数值作为缩放因子来统一控制行高，缩放因子是直接继承的，而不是继承计算值。例如修改上例中的行高为：

p { line-height : 1; }

则上例中的XHTML代码显示如图7-27所示。


图7-27缩放因子对行高的影响

当内容中含有图片的时候，如果图片的高度大于行高，则含有图片行的行框将被撑开到图片的高度，如图7-28所示。


图7-28 含有图片的行

注意：图片虽然撑开了行框，但是不会影响行高，因此也不会影响到基于行高来计算的其他属性。
提示：当行内含有图片的时候，图片和文字的垂直对齐方式默认是基线对齐，关于垂直对齐将在本章[7.4 垂直对齐：vertical-align属性]一节中讨论。

5，浏览器的差别与错误

浏览器在显示的时候往往会有自己的表现形式，例如在Opera内，行高将按照CSS定义的将行距除以2增加到内容区域的上下两边，而IE和Firefox则不是完全平分，如图7-29所示。


图7-29 不同浏览器对行高的显示

不过，相差的1至2个像素在实际显示中一般不会有太大的影响，因此可以忽略不计。比较严重的错误是IE 6.0对于含有图片或者表单元等可替换行内元素的行高失效的问题，不过，在IE 7.0中已经修正了这个错误，但是其表现同其它浏览器也不相同。例如有如下代码，其显示如图7-30所示。

#lineHeight4 p { line-height : 60px; }
#lineHeight4 fieldset{ border : 0; }

<div id=”lineHeight4″>

 <p>

内容含有图片在[IE 6]内浏览line-height将失效。

<img src=”../../img/ddcat_anim.gif” alt=”图片” width=”88″ height=”31″ />

</p>

 <form id=”testForm” action=”#”>

 <fieldset> 

<p><label for=”test1″>表单元素</label>< input type=”text” maxlength=”16″ value=”IE6内行高失效” /></p>

 </fieldset>

 </form>

 </div>


图7-30 包含替换元素的行高在IE内失效

由图7-30读者可以发现，IE 7.0中，将半行距分别加在了图片的上下，而由于图片默认是基线对齐，因此文字的基线下移了，这显然不符合CSS中的规定。

对于IE 6.0中行高失效的问题，需要使用CSS Hack手段来针对IE 6.0设定替换元素的上下补白来修正。

6，在单行或多行或图片实现垂直居中

1）单行文字的垂直居中对齐
网上都是这么说的，把line-height值设置为height一样大小的值可以实现单行文字的垂直居中。这句话确实是正确的，但其实也是有问题的。问题在于height，看我的表述：“把line-height设置为您需要的box的大小可以实现单行文字的垂直居中”，差别在于我把height去掉了，这个height是多余的，您不信您可以自己试试。

2）多行文字的垂直居中
要实现高度不固定的文字垂直居中使用padding就好了。

对于高度固定的div，里面文字单行或多行显示，字体大小有大有小的情况怎么办呢？方法之一就是借助于line-height。

下图为demo页面的截图批注图：

正如上面所说，line boxes的高度取决于它的下属职员的最高高度。而这个高度由一个不占据任何空间的空格完成，方法即使设置font-size为0，line-height为所需要的高度。同时，我们为了分隔line boxes，同时要保持在一行上，需要设置display属性为inline-block。如下代码，有别于demo：

.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>

效果如上批注图。已通过IE8以外的主流浏览器的兼容性检测。以前曾见过说IE8的line-height有些问题，如果谁发现IE8下有问题，欢迎指出，不甚感谢。

【楼主：此方法只能用于文字宽度不超过p的内容，或者人工使用<br>断行。】

3）图片的垂直居中
您可以狠狠地单击这里：行高使图片垂直居中显示demo

http://www.zhangxinxu.com/study/200911/image-center-new-method-test.html

此方法在“大小不固定的图片、多行文字的水平垂直居中”一文中的最后补充内容里已经详细讲解了。这里不多说了。

//zxx:之前未能在IE8下测试，现发现此方法不仅在Opera下有问题，在IE8下也是表现欠佳。所以仅仅使用line-height的垂直居中法有待斟酌，或许要使用与上面多行文字垂直居中的同样的方法来实现图片垂直居中的效果。

7，行高在文章显示中的应用

一般社交型的网站都会有发博文或写日志的功能，其中发表后的文章显示也是有学问的，其中之一就是line-height行高。

首先要知道行高的几种表示方法：px/em，或normal，或百分值，或数值，或inherit继承。

在显示文章的box里，px的表示方法首先是要被淘汰的。因为文章里面的文字是有大有小的，使用px定值，由于继承性，无法实现根据文字大小自动调整间距，会出现大号文字重叠的现象。

normal也是不行的，一般文章显示最好是650像素的宽度，1.5倍的行距较好。一般浏览器的normal值在1~1.2之间，使用normal必然文字间距过小，阅读吃力。

百分值也有继承性，但是有个很搓的办法可以实现文字间距自动适应于文字的大小，那就是使用“*”通配符，例如：.article_box *{line-height:150%;}就不会出现文字重叠的情况了。网易博客就是使用的这个方法，下图为证：

为什么说这个方法搓呢，使用“*”通配符大大增加了css的渲染，效率低，而且有更好的方法，就是使用数值（缩放因子）。150%虽然和1.5在值上是一样的，但是它们也是有差别的，差别在于继承性，使用百分比会计算line-height的值，然后以px像素为单位继承下去，而1.5则是先继承1.5这个值，遍历到了该标签再计算去line-height的像素值。所以同样的效果只需要.article_box{line-height:1.5;}就可以实现了。

8，使用行高代替高度避免haslayout

在某些情形下，line-height可以和height互换，因为实现的效果一样。都能撑开一个高度，然而这两个css属性有一个较隐蔽的差异，就是使用height会使标签haslayout，而使用line-height则不会。以前只有IE6的时候曾流行使用height清除浮动，就是利用了IE下height使haslayout的属性。但有时候，haslayout并不需要，反而要避免。

读过我前面有关自适应按钮文章的人可能会发现我使用了line-height代替了height，其原因在于：IE6，IE7下，类似inline-block属性的元素里如果有block属性的元素，如果该block haslayout，则该标签会冲破外部inline-block的显示而宽度100%显示，从使按钮自适应文字大小的效果失效，解决方法就是使用line-height代替height。

上图中第一个标签使用height定高，结果宽度直接100%显示；第二个标签使用line-height定高，结果很规矩，自适应与内部文字大小。其代码如下：

css部分：

.out{display:inline-block; background:#a0b3d6; margin-top:20px;}
.in1{display:block; height:20px;}
.in2{display:block; line-height:20px;}

html部分：

<span class="out">
	<span class="in1">height:20px;</span>
</span>
<span class="out">
	<span class="in2">line-height:20px;</span>
</span>