欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS行高line-height_html/css_WEB-ITnose

程序员文章站 2022-03-26 08:14:03
...
遇到的问题:在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)

相关标签: CSS行高line-height