line-height不同单位之间的区别

line-height不同单位之间的区别

line-height用来设置元素的行高。

该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。

line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

line-height可能的值类型有三种，一种带有css单位px、em等，一种为百分比如150%，还有一种为纯数值，如1.5。一直以为百分比150%和数值1.5是相等的作用，看了别人的博客才知道原来他们还是有区别。

下面针对这三种类型简单分析一下区别：

假设line-height的值为一变量$lh（这里只是假设，方便引用）
<div style="background:red;line-height:$lh;font-size:32px">
    <p style="background:red;font-size:24px;">行间距</p>
</div>

 

第一种 带有css单位  

　　$lh会先换算成px，然后子元素再继承。

　　如果$lh为64px，那么p继承到的行高也自然为64px;如果$lh为2em，那么div设置的行高2em会先折算成px，即2倍于当前元素的字体为64px，p再继承其行高为64px。

<div style="line-height:64px;font-size:32px"> 
    <p style="font-size:24px;">行间距</p> // p行高为64px
</div>

<div style="line-height:2em;font-size:32px"> 2*32 = 64
    <p style="font-size:24px;">行间距</p> // p行高为64px
</div>

第二种 百分比%

　　同样是先换算成px，子元素在继承，其实可以跟第一种归为同一类型。百分比是基于当前字体尺寸的百分比行间距，等同于em。100%==1em

<div style="line-height:200%;font-size:32px"> 200%*32 = 64
    <p style="font-size:24px;">行间距</p> // p行高为64px
</div>

第三种 数值如2

　　 与上述套路狠不一样，为先继承，在换算成px。

　　子元素继承父元素的数字，然后当前的字体尺寸相乘来设置行间距。

<div style="line-height:2;font-size:32px"> 
    <p style="font-size:24px;">行间距</p> // 2*24 行高为48px
</div>

 

能工摹形，巧匠窃意。