問題描述

<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所在元素的實際行高是多少呢,原因是什么呢？

問題解答

<p style='font-size: 14px;line-height: 3>

這個是定義了一個基準的字體大小，行高設置3的意思是下面所有子元素，其行高是自己字體的3倍

<p style='font-size: 2em'>這個元素的字體大小是父元素的2倍，214=28px，行高是自己字體的3倍 283 = 84px

<span style='font-size: 3em;line-height: 3em'>這個元素的字體大小是父元素的3倍，283=84px；行高是自己字體的3倍 843 = 252px

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

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

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

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

不僅僅是字體，將行距(line-height)，和縱向高度的單位都用em。保證縮放時候的整體性。em指字體高，任意瀏覽器的默認字體高都是16px。所以,未經(jīng)調(diào)整的瀏覽器都符合:1em=16px。那么12px=0.75em,10px=0.625em。

為了簡化font-size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變?yōu)?6px*62.5%=10px,這樣12px=1.2em,10px=1em,也就是說,只需要將你的原來的px數(shù)值除以10，然后換上em作為單位就行了。

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

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

計算em單位的字體大小和行距數(shù)值，要避免字體大小的重復聲明，也就是避免1.2 * 1.2= 1.44的現(xiàn)象。比如說在#content中聲明了字體大小為1.2em，那么在聲明p的字體大小時就只能是1em，而不是1.2em, 因為此em非彼em，它因繼承#content的字體高而變?yōu)榱?em=12px。

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

p { text-indent: 2em; }

由于你父元素設置了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

樓上都是正解