雅乐网

计算机技术、学习成长

编程 » Web » css中line-height属性各个单位详解

css中line-height属性各个单位详解

我们都知道css中line-height属性用于调整行高,它的值有一些不同的单位,本文将详细介绍这些单位的作用和一些区别。

语法规则如下

line-height: normal | <number> | <length> | <percentage>

如果子元素没有指定行高,那么将默认继承父元素的行高,继承的时候父元素行高带单位和不带单位有一些区别。

为了方便,下面效果中我设置了背景颜色,以便观察行高到底是多少

1. normal

设置值为normal时 行高根据浏览器默认决定,不同浏览器可能有不同的值。

2. 使用单位px

使用px单位表示行高为多少像素

我是父元素 字体大小20px 行高25px

我是子元素 字体30px 行高继承父元素行高25px

 3. 使用百分数或em单位

120%和1.2em效果完全相同。如果某个元素设置行高为1.5em,它的行高就是 1.5乘以 它的字体大小

我字体大小20px,行高1.5em 算出值就是20*1.5为30px

 如果上面这个例子 行高1.5em 其实它的行高是30px

如果他有子元素,子元素继承的行高是它计算后的行高30px

我是父元素 字体大小20px 行高150% 计算后30px

我是子元素 字体30px 行高继承父元素行高30px

 4. 不带单位

不带单位表示行高为元素字体大小乘以该数字。如果子元素继承父元素的该属性,则只继承了该数字,实际行高由该系数乘以各个元素自己的字体大小而定

我是父元素 字体大小20px 行高1.5 计算后30px

我是子元素 字体30px 行高继承系数1.5 计算后是45px

 总结

由于不带单位的时候只继承了系数,推荐使用这种方式。

 

如果文章对你有帮助,欢迎点赞或打赏(金额不限)。你的打赏将全部用于支付网站服务器费用和提高网站文章质量,谢谢支持。

版权声明:

本文由 原创,商业转载请联系作者获得授权。
非商业转载请注明作者 雅乐网 ,并附带本文链接:
http://www.yalewoo.com/css_line-height.html

上一篇:

下一篇:

我要评论

验证码*: 2 + 2 =