CSS行高--line-height

遇到的问题：在css中，不理解line-height：1与line-height：1px的区别

发现的过程：最近在学做一个网站的过程中，设置两行文字之间的行高时需要用到line-height，发现了这个问题，如下图：

 

 

解释

定义：line-height 属性设置行间的距离（行高），不能使用负值。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差(行距)分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

 

可能的值

值	说明
normal	默认,设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。相当于倍数
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

 

 

1.line-height：1 

例如：

<div style="border:dashed 1px #7F7F7F;line-height: 1;font-size: 10px;">
                <p style="font-size: 30px;">123<br/>
                        123
                </p>
</div>

意思是行间距为当前字体尺寸30px*1，即行间距等于字体尺寸30px。

此时结果如下图：

 

 

2.line-height：1px

例如：

<div style="border:dashed 1px #7F7F7F;line-height: 1px;font-size: 10px;">
                <p style="font-size: 30px;">123<br/>
                        123
                </p>
</div>

意思是行间距为1px，此时上下两行字的行间距就是1px，接近于重合。结果如下图：

  

 

3.line-height：100%   行高是可以继承的，但并不是简单的copy父元素行高，继承的是计算得来的值。

例如：

<div style="border:dashed 1px #7F7F7F;line-height: 100%;font-size: 10px;">
                <p style="font-size: 30px;">123<br/>
                        123
                </p>
</div>

结果如下图：

 

按照一般想法，既然line-height可以继承，那么p元素的行高也是100%，可结果并不如此。这就是继承计算的结果，如果父元素的line-height有单位（px,%），那么继承的值则是换算后的一个具体的px级别的值，在本例中就是10px*100%=10px，而字体大小为30px，所以发生重叠。

 

而如果属性值没有单位，则浏览器会直接继承这个“因子（数值）”，而非计算后的具体值，此时它的line-height会根据本身的font-size值重新计算得到新的line-height 值，如例二所示。

 

4.line-height：normal 

normal的情况为默认值，浏览器会计算出“合适”的行高，多数浏览器（Georgia字体下）取值为1.14，即为font-size的1.14倍，如果未设定font-size，那既是基准值16px的1.14倍。单独讨论这个取值是没什么意义的，因为normal和具体的数值相比，会因为字体的不同而不同。如果是项目需要，还是给定一个值好一些。

参考资料：

[1]“CSS行高—line-height ”，http://www.cnblogs.com/dolphinX/p/3236686.html，(2013/8/4)

[2] Danilo，https://www.zhihu.com/question/21786347/answer/19349031，(2013/10/12)