css – EM的线高

前端之家收集整理的这篇文章主要介绍了css – EM的线高前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想将我的新网站从像素转换为ems。我的问题是,我是否也应用ems到我的text-height属性

解决方法

假设“转换为ems”是指使用em单位进行font-size,那么您应该以适合于字体大小的方式设置line-height。这两个属性密切相关,如果您将其中一个设置为em,另一个(例如)以px或pt为单位,则如果字体大小更改,则页面将会中断。因此,它将反对“使用ems”使用本质上不同的单元来实质连接属性的想法。

例如,如果您设置font-size:1.5em和line-height:18px,则事情将取决于元素的父项的字体大小,如果该大小小于或远大于预期的大小,则可能会出错。

无论您使用em单元还是纯数字,都是一个不同的问题。仅使用一个数字,如line-height:1.2,主要相当于使用em单位,如line-height:1.2em。但是有一点不同之处在于,当line-height被继承时,它是被继承的纯数字,而不是计算的值。

例如,如果一个内部元素的字体大小是其父元素的两倍,那么继承的值1.2意味着使用它自己的字体大小的1.2倍,这是可以的。但是,如果父级具有line-height:1.2em,那么该子级将继承一个父本字体大小的1.2倍的值 – 这比它自己的字体大小小得多。

有关更多解释,请参见line-height @ Mozilla Developer Network

猜你在找的CSS相关文章