cssline-height行高全解

1. 基线、底线、顶线

行高指的是文本行的基线间的距离。
基线并不是汉字的下端沿，而是英文字母"x"的下端沿

2. 行距、行高

3. 内容区

底线和顶线包裹的区域，实际中不一定看得到，但却是存在。

4. 行内框

行内框只是一个概念，它无法显示出来，但是它又确实存在
它的高度就是行高(这句话有问题，看http://www.cnblogs.com/youxin/p/3336854.html）
在没有其他因素（padding）影响的时候，行内框等于内容区域

5. 行框

行框（line box）。同行内框类似，行框是指本行的一个虚拟的矩形框
行框高度等于本行内所有元素中行高最大的值.

元素对行高的影响

对于行内元素如em、strong、span和等，其padding、margin、border-top、border-bottom 不会增加行高。
padding会覆盖；margin将重置为0；border-top和border-bottom同样会覆盖。
padding-left、padding-right、border-left和border-right可用。
img元素会影响行高
设置行内元素的padding、border和margin并不会撑大外层元素的高度，如下图：

扩展阅读

行高：line-height属性[1]
行高：line-height属性[2]——行高的计算与继承
行高：line-height属性[3]，该文章包括：
- 浏览器的差别与错误
- 应用：单行文字在垂直方向居中
深入理解行高 line-height（强烈推荐）

line-height应用：

1、单行文字的垂直居中对齐
网上都是这么说的，把line-height值设置为height一样大小的值可以实现单行文字的垂直居中。这句话确实是正确的，但其实

也是有问题的。问题在于height，看我的表述：“把line-height设置为您需要的box的大小可以实现单行文字的垂直居中”

，差别在于我把height去掉了，这个height是多余的，您不信您可以自己试试。(个人理解，line-height对于非替换元素，

元素行内框高度刚好等于Line-height的值，所以我们只要显示设置line-height后，行内框高度就等于line-height了。由于

行框高度等于本行内所有元素中行高最大的值.这里高度一样，所以就相当于设置height了。）

<style>

div{

    border:1px dashed #cccccc;

    line-height:30px;

}

</style>

</head>

<body>

<div>

    当行文字垂直居中

</div>

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

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

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

css代码：

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以外的主流浏览器的兼容性检测。

3、图片的垂直居中
您可以狠狠地单击这里：行高使图片垂直居中显示demo
此方法在“大小不固定的图片、多行文字的水平垂直居中”一文中的最后补充内容里已经详细讲解了。这里不多说了。

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

六、行高在文章显示中的应用
一般社交型的网站都会有发博文或写日志的功能，其中发表后的文章显示也是有学问的，其中之一就是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;}就可以实现了。

七、使用行高代替高度避免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>

转自：http://www.zhangxinxu.com/wordpress/?p=384