【示例2】下面示例演示了不同取值下，行高样式的比较效果。行高取值单位一般使用em或百分比，很少使用像素，也不建议使用。
- 当line-height属性取值小于一个字大小时，就会发生上下行文本重叠现象。在上面示例基础上，修改定义的类样式。
.p1 { line-height:0.5em;}
.p2 { line-height:0em;}
在浏览器中预览，则显示效果如图15所示，说明当取值小于字体大小时，多行文本会发生重叠现象。
图15 段落文本重叠演示效果
- 一般行高的最佳设置范围为1.2em~1.8em，当然对于特别大的字体或者特别小的字体，可以特殊处理。因此，用户可以遵循字体越大，行高越小的原则来定义段落的具体行高。
例如，如果段落字体大小为12px，则行高设置为1.8em比较合适；如果段落字体大小为14px，则行高设置为1.5em~1.6em比较合适；如果段落字体大小为16px ~18px，则行高设置为1.2em比较合适。一般浏览器默认行高为1.2em左右。例如，IE默认为19px，如果除以默认字体大小（16px），则约为1.18em；而Firefox默认为1.12em。
【提示】
行高一般以中线为准，减去字体大小值之后，平分为上下空隙，如果值为奇数，则把多出的一个像素分给上边空隙或下边空隙。
例如，如果字体大小为12px，行高为1.6em，则行高实际为19px，行高减去字体大小后等于7px，则上下空隙分别分得3px，然后把多出的一个像素分给上边空隙。使用等式表示如下：
行高（19px）=下边空隙（3px） + 字体大小（12px） + 上边空隙（4px）
如果在浏览器中预览，则英文字体显示如图16所示，其中多余的一个像素分给了上边空隙。而对于中文字体来说，则多余的一个像素分给了下边空隙，如图17所示。
图16 英文字体的行高值分配示意图
图17 中文字体的行高值分配示意图
【示例3】下面示例演示了如何设置更灵活的行高样式。
用户也可以给line-height属性设置一个数值，但是不设置单位。例如：
body { line-height:1.6;}
这时浏览器会把它作为1.6em或者160%，也就是说页面行高实际为19px。利用这种特殊的现象，用户可以设计多层嵌套结构中行高继承出现的问题。
新建一个网页，保存为test2.html，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，设置网页和段落文本的默认样式。
body {
font-size:12px;
line-height:1.6em;}
p { font-size:30px;}
然后在<body>标签中输入如下标题和段落文本。
<h1>《人间词话》节选</h1> <h2>王国维</h2> <p>古今之成大事业、大学问者，必经过三种之境界："昨夜西风凋碧树。独上高楼，望断天涯路。"此第一境也。"衣带渐宽终不悔，为伊消得人憔悴。"此第二境也。"众里寻他千百度，蓦然回首，那人却在灯火阑珊处。"此第三境也。此等语皆非大词人不能道。然遽以此意解释诸词，恐为晏欧诸公所不许也。</p>
上面示例定义body元素的行高为1.6em。由于line-height具有继承性，因此网页中的段落文本的行高也继承body元素的行高。浏览器在继承该值时，并不是继承“1.6em”这个值，而是把它转换为精确值之后（即19px）再继承，换句话说p元素的行高为19px，但是p元素的字体大小为30px，继承的行高小于字体大小，就会发生文本行重叠现象。如果在浏览器中预览，则演示效果如图18所示。
图18 错误的行高继承效果
解决方法：
在定义body元素的行高时，不为其设置单位，即直接定义为line-height:1.6，这样页面中其他元素所继承的值为1.6，而不是19px。则内部继承元素就会使用为继承的值1.6附加默认单位em，最后页面中所有继承元素的行高都为1.6em。
body {
font-size:12px;
line-height:1.6;}
p { font-size:30px;}