遇到的问题:在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)