浅谈line-height 在各浏览器中的特性
通过阅读本文你将了解到line-height的五种定义方法及在各浏览器中的特性与最佳定义方法。
首先看2个问题：
1）line-height和font-size 有联系吗，什么联系？
2）line-height的继承特性有什么特殊性？
如果你对这2个问题很清楚的话，你可以跳过本文。
首先看看w3c的解释：line-height 属性设置行间的距离（行高，行间距）。
该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。什么是基线（baseline）？在我之前的一篇文章中已经给出了一个地址，如果不太清楚的话，可以去看看。一个重要的特性就是line-height可以被继承。
浏览器的默认值不一样
各个浏览器的默认值不一样（在1~1.2），所以我们看到的行高都不一样，也是由于这个原因，一般网站都有reset。
line-height有5种定义方式
1）div{line-height：nomal}就是默认的形式，不太推荐这种方式，因为各个浏览器都不一样，会有差异，firefox大概是34px。oprea大概是30px。
2）div{line-height:inherit}继承的方式，就是继承父级元素的形式，不定义的默认值，也不推荐这种方式。
3）div{line-height:150%} 百分比的形式，比较的灵活。/*基于当前字体尺寸的百分比行间距*/
4）div{line-height：20px} 长度的形式，关于常见的一些CSS中的长度单位，后面我将讲述一下。
5）div{line-height:1.5} 纯数字的方式，我推荐的方式，能适应各种。
关于继承特性
1）百分比的继承：继承下来的元素会忽略font-size的大小，都是用同一值。如下图所示：
代码如下：
<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style type="text/css">
* { margin:0; padding:0 }
#doc { width:990px; margin:0 auto; margin-top:50px;font:12px/150% arial; }
#doc h4 { border-bottom:1px solid #000;font-size:30px; }
#test{font-size:20px;}
p{font-size:26px}
</style>
<title>line-height的研究</title>
</head>
<body >
<div id="doc">
<h4>line-height的实践</h4>
<div id="test">从目前的形式来看，HTC进军国内行货手机市场绝不是玩票，2011刚开年，就接连不断地推出新机，
并且还都是原生Android 2.2的机器，再加上几款运营商定制机型，可以说产品覆盖率非常的高。</div>
<p>今天，我们再次拿到这款2010下半年炙手可热的HTC“野火”，行货今非昔比</p>
</div>
</body>
</html>
2）长度的继承：长度是一个绝对值，同样的，继承下来的元素会忽略本身的font-size的大小的。这个可以将上面的例子150%换成18px，效果和上面一样。
3）默认值的继承：这里和前面的方式有点不一样，后面的元素不会忽略font-size的大小，而是基于font-size的大小来计算高度的。我是用firefox3.6测试的，各个元素的font-size的大小不一样，基本上各行文字不再重叠在一起了。后来我用firebug看了下各行的高度，h4是40px，#test是54px（由于是在2行排列的），但是p是35px，我用了chrome10测试了下，h4是40px，#test是46px，p是30px。这2个浏览器就表现不一样了。可见这个方式不是一个好的方式，会带来浏览器的差异。
4）数字的方式：这是对继承方式的一个加强，后面的元素会根据font-size的大小来计算高度的，系数就是这个数字，可见这个在所有的浏览器中都是一样的，可以将
上例子中的150%换成1.5试试。
line-height与行盒（line box）的高度
首先看看height与line-height吧，如果对同一个div修饰的话，height指的是整个div的高度，而line-height应该指的是div中一行间距（两行文字的baseline之间的距离），要理解这个东西，必须要理解半行间距，先看一个例子：
<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style type="text/css">
* { margin:0; padding:0 }
#doc { width:990px; margin:0 auto; margin-top:50px;font:12px/1.5 arial;height: }
#doc h4 { border-bottom:1px solid #000;font-size:30px; }
.test{font-size:20px;line-height:30px}
</style>
<title>line-height的研究</title>
</head>
<body >
<div id="doc">
<h4>line-height的实践-半行间距</h4>
<div class="test">研究半行间距的问题abcdefg</div>
</div>
</body>
</html>
在以.test为class这行文字中。line-height:30px font-size 是20px。其实可以看做文字的高度，那么在文字上到顶部，文字下到底部就是半行间距， 很明显，如果在添加一行文字的话，上一行文字的底部半行间距到下行文字的顶部半行间距加上font-size的大小刚好是line-height的高度，其实也就是2行的baseline的高度。
这个例子中也很明显的看出了line-height和font-size的区别。
line-height小于font-size怎么办？
从上面的例子也可以看出，line box的优先级高，以line box为主。由于line-height是决定line box的一个很重要因素，每一行的文字将根据line-height的取值，决定最后的line box的高度。
line-height 特性
垂直居中，为什么会垂直居中呢？如上面所讲的，两行baseline之间的距离包括上半行间距和下半行间距，这个就组成一个line-height。从整体上来算的话，上和下应该是一样的，试想下如果上下不相等，那该是什么样子的呢？可能可控，可以调节。但是目前没有。从美学的观点来看，今后也不会有，所以上和下半行间距是一样大小的。这就构成了垂直居中。
利用垂直居中的特性：我们可以做当行文字的居中，多行的文字居中。图片居中等等。。
标题，段落与行高的关系
一般的情况下标题用1.2 ，段落至少用1.5（在万维网内容可存取性指南2.0版有叙述）
总结
本文讲述了line-height的定义的5种方式，然后结合line-height的继承特性 ，分析了各种继承特性的问题，最后得出了使用数字来表示的正确和可取性。本文比较了line-height和font-size的区别，从半行间距的的分析入手，总结了line-height的垂直居中特性以及基于这个特性的应用例子。同时也分析了font-size大于line-height怎么办的优先级问题。
此处评论已关闭