CSS解析——你真的懂line-height吗？
100人浏览 2024-08-19 09:18:14
line-height相信小伙伴们都很熟悉，定义的是文字段落的行高，它有什么特殊之处呢？
其实line-height的特殊之处不在于它的用途，而是它的值。在日常开发中，使用最多的肯定是px。其实，line-height的单位可以是px、em、rem等，也可以是纯数字，不带单位。
带单位的行高和不带单位的行高表现不一样，因为它们的继承方式不一样。下面我们来看一些例子。
带单位的行高
我们在body中定义了行高是1.2em，在类about-me中定义了字号2em，在默认情况下，浏览器的字号是16px，所以段落中的字号是16*2位32px，段落中的行高会继承自body，body中的行高是16*1.2为19.2px，因此段落中的文字会重叠。而我们希望的是段落中的行高继承body中的1.2em，而不是body中行高计算后的值。
我们再看看另一种写法。
不带单位的行高
上图的效果符合我们的预期，其实只改变了body中的行高（font-size：1.2）。此时，段落中的行高还是继承自body中的行高，但是继承的并不是body中计算后的值，而是无单位的值1.2，然后在计算段落的行高是，使用1.2*32位38.4px。
由此我们可以得出一个结论，要么在段落中显示的声明行高为1.2em；如果要使用继承的行高，那么应该使用无单位的值作为line-height的值。你学废了吗？
相关推荐
-
PHP8种变量类型的详细讲解2025-02-22 00:32:24 -
php+apache 和 php+nginx的区别2025-02-22 00:21:27 -
PHP：与workerman结合实现定时任务2025-02-22 00:15:57 -
Nginx的Rewrite规则与实例2025-02-22 00:15:39 -
MySql中身份证字段的简单脱敏介绍2025-02-22 00:15:36