line-height：1.5和line-height：150％在css中有什么区别？ [英] What's the difference between line-height:1.5 and line-height:150% in css?

问题描述

任何人都知道吗？

解决方案

短版本： line-height：150％ code>是静态的， line-height：1.5 是动态的。对继承元素的影响更明显。示例：

HTML

 < div style = -size：12px> 
< span style =font-size：24px>测试< / span> 
< / div> 
  

此CSS

  div {line-height：150％; } / *计算行高：18px（150％* 12px）* / 
 span {} / *计算行高：18px（直接继承）* / 
  / pre> 
 
 
与此相反：
  div { height：1.5} / *计算行高：18px（1.5 * 12px）* / 
 span {} / *计算行高：36px（1.5 * 24px）* / 
  
您可以在 CSS2规格页 
 
Anyone knows about it?
解决方案
Short version: line-height: 150% is static, line-height: 1.5 is dynamic. The effect is more evident on inheriting elements. An example:

HTML
<div style="font-size: 12px">
    <span style="font-size: 24px">test</span>
</div>
This CSS
div { line-height: 150%; } /* Computed line-height: 18px (150% * 12px) */
span { }                   /* Computed line-height: 18px (inherited directly) */
As opposed to this:
div { line-height: 1.5 }   /* Computed line-height: 18px (1.5 * 12px) */
span { }                   /* Computed line-height: 36px (1.5 * 24px) */
You may read more at the CSS2 specs page

                        
这篇关于line-height：1.5和line-height：150％在css中有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！