当前位置:Gxlcms > html代码 > CSS行高line-height_html/css_WEB-ITnose

CSS行高line-height_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:10人阅读

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

例如:


123

123


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

此时结果如下图:

2.line-height:1px

例如:


123

123


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

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

例如:


123

123


结果如下图:

按照一般想法,既然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 ”,,(2013/8/4)

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

人气教程排行