当前位置主页 > 资料库 > 前端教程 > CSS属性参考 | line-height

CSS属性参考 | line-height

2016-06-26

CSS line-height 属性用于设置一个元素的行高(行间距)。通俗来说就是控制相邻两行文字之间的垂直距离。

通常我们会使用line-height属性来设置行与行之间的距离。如果一个元素的line-height值大于font-size的值,那么行高和字体大小值之间的差值会被分割为相等的两份,生成两份“半行间距”,它们会分别被放置在文本的上部和下部,这样内联元素就被居中显示了。可以通过vertical-align属性来改变文本的对齐方式。

半行间距示意图

如果line-height值小于font-size的值,那么文本的内容可能会溢出元素,两行相邻的文本可能会重叠在一起。

line-height属性的值可以是关键字normal。或者是<number>值,或<length>值,或<percentage>值。

如果line-height属性的值为<number>数据类型值,它通常是无单位的数值。此时行高通过这个无单位值乘以元素的font-size值来得到。通常情况下,这种方法设置line-height的方法是我们首选的方法。使用这种设置行高的方式,在继承情况下不会有异常的情况发生。

例如,如果一个元素的字体大小font-size设置为16像素,而它的line-height设置为120%。那么浏览器计算的行高值为(16px * 120)/100 = 19.2px。如果在该元素中有一个子元素,而子元素的字体大小设置为24像素,行高继承自父元素,那么行高就比字体大小要小,子元素中的文本会重叠在一起。

如果父元素使用无单位的数值作为line-height值,那么子元素继承的是这个无单位的数值,而不是经过计算的行高值。所以以上面的例子为例,父元素的line-height设置为1.2,那么子元素的行高是1.2 * 24px = 28.8px

所以,建议在使用line-height属性时使用无单位的数值,否则你需要为元素的所有子元素都设置自己的行高。

另外,我们通常会在font属性中设置行高。具体请参考font属性的介绍。

根据规范规定,当line-height属性应用在可替换的内联元素时,不会有任何效果。(可替换元素是指外观和尺寸由外部资源定义的元素,如图像<img>,表单元素<button><textarea><input><select>等。其它的元素都是不可替换的元素)。

如果line-height属性应用在不可替换的内联元素(例如<span>)时,它用于指定line box的高度值。

对于块级元素,line-height属性指定元素内部的line box的最小高度。

官方语法
line-height: normal | <number> | <length> | <percentage> | inherit
                            

参数:

  • normal:行高值取决于浏览器的用户代理。根据规范,行高值应该根据字体来设置合适的值,值和<number>参数意义相同,且大小在1.0-1.2之间。根据元素的font-family属性,桌面浏览器使用的默认值多数为1.2。
  • <number>:无单位的<number>数据类型值。实际行高值等于该值乘以元素的font-size。在级联时,子元素继承的line-height值是这个无单位数值,而不是经过计算后的行高值。数值不允许为负数。
  • <length>:使用<length>数据类型来作为值,用于计算line box的高度。
  • <percentage>:使用<percentage>数据类型来作为值。实际行高值等于给定百分比值乘以元素的字体大小。在级联时,子元素继承的line-height值为经过计算后的实际的行高值。百分比值不允许为负数。
  • inherit:继承父元素的行高值。

line-height属性的初始值为normal

应用范围

line-height属性可以应用在所有的元素上。

示例代码
/* 关键字 */
line-height: normal;

/* 无单位值:行高等于这个值乘以字体大小 */ 
line-height: 3.5;

/* <length> 值 */
line-height: 3em;

/* <percentage> 值 */
line-height: 34%;

line-height: inherit;                              
                            

使用font属性来设置行高。

font: 16px/1.4 "Microsoft YaHei", sans-serif;                              
                            
浏览器支持

所有的现代浏览器都支持line-height属性,包括Chrome, Firefox, Safari, Opera, Internet Explorer 以及 Android 和 iOS。

相关阅读
Previous:
上一篇:CSS属性参考 | height
Next:
下一篇:CSS属性参考 | letter-spacing

我要评论

返回顶部