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>