[css] 说下line-height三种赋值方式有何区别?
程序员文章站
2022-09-06 08:58:11
[css] 说下line-height三种赋值方式有何区别?line-height 可以有带单位及不带单位的写法(感觉其实是两种)。div{line-height: 24px;line-height: 1.5;line-height: 1.5em;line-height: 150%;}对于应用在单个元素上,这几种写法的效果都是一样的(除了 px 需要一些计算)。但由于 line-height 是可以被继承的,因此会影响内部子元素的 line-height。简单的可以总结为:...
[css] 说下line-height三种赋值方式有何区别?
line-height 可以有带单位及不带单位的写法(感觉其实是两种)。
div{
line-height: 24px;
line-height: 1.5;
line-height: 1.5em;
line-height: 150%;
}
对于应用在单个元素上,这几种写法的效果都是一样的(除了 px 需要一些计算)。但由于 line-height 是可以被继承的,因此会影响内部子元素的 line-height。简单的可以总结为:
带有单位的 line-height 会被计算成 px 后继承。子元素的 line-height = 父元素的 line-height * font-size (如果是 px 了就直接继承)
而不带单位的 line-height 被继承的是倍数,子元素的 line-height = 子元素的 font-size * 继承的倍数
个人简介
我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论
主目录
本文地址:https://blog.csdn.net/weixin_43392489/article/details/113810749