css3 - css line-height和font-size高度问题，谁能帮忙解释一下呢

Question

<p style="font-size: 14px;line-height: 3">
    <p style="font-size: 2em">
        hello
        <span style="font-size: 3em;line-height: 3em">
            world
        </span>
    </p>
</p>

hello和world所在元素的实际行高是多少呢,原因是什么呢？

Answer 1

這個元素的字體大小是父元素的2倍，214=28px，行高是自己字體的3倍28 3 = 84px

這個元素的字體大小是父親元素的3倍，283=84px；行高是自己字體的3倍843 = 252px

PS： span上面的line-height設定與否，效果是一樣的

Answer 2

行高，樓上兩位都計算的很清楚了，我來說說我理解的原因吧。

px是絕對單位，不支援IE的縮放，em是相對單位。

1em指的是一個字體的大小，它會繼承父級元素的字體大小，因此並不是固定的值。

不只是字體，將行距(line-height)，和縱向高度的單位都用em。保證縮放時候的整體性。
em指字體高，任意瀏覽器的預設字體高都是16px。所以,未經調整的瀏覽器都符合:1em=16px。則12px=0.75em,10px=0.625em。

為了簡化font-size的換算，需要在css中的body選擇器中宣告Font-size=62.5%，這就使em值變成16px*62.5%=10px,這樣12px=1.2em,10px= 1em,也就是說,只需要將你的原來的px數值除以10，然後換上em作為單位就行了。

em有以下特點:
1.em的值並不是固定的;
2.em會繼承父級元素的字體大小。

重寫步驟:
1.body選擇器中聲明Font-size=62.5%;
2.將你的原來的px數值除以10，然後換上em作為單位;

計算em單位的字體大小和行距數值，要避免字體大小的重複聲明，也就是避免1.2 * 1.2= 1.44的現象。比如說在#content中聲明了字體大小為1.2em，那麼在聲明p的字體大小時就只能是1em，而不是1.2em, 因為此em非彼em，它因繼承#content的字體高而變為了1em=12px。

em巧用：
中文文章中，一般段首空兩格。如果用px當單位，對12px字體來說需要空出24px，對14px字體來說需要空出28px…這樣換算非常不通用。如果用上em單位，這個問題就很好解決了，1個字的大小就是1em，那兩個字的大小就是2em。因此，只需這樣定義就行了：

p { text-indent: 2em; }

Answer 3

由於你父元素設定了font-size:14px，所以子元素font-size中1em=14px
而line-height為3，所以hello的字體大小是214=28px,所以line-height=328=84px
由於字體的em會繼承，所以world的字體大小是2314=84px，所以line-height=3*84=252px

Answer 4

樓上都是正解