被誤解的 em 單位

被誤解的 em 單位

em 單位每每被認爲是相對於父元素的 font-size 大小來進行計算的.

例如一個元素的父元素設置了以下的 font-size:

body {
    font-size:20px;
}

而其中的 div 設置了 font-size 設置了 1.5em :

div {
    font-size:1.5em;
}

那麼 div 元素的 font-size = 20 * 1.5 = 30px.

實際狀況

咱們都知道 em 是相對單位, 可是實際上 em 單位相對的是自身的 font-size 大小, 咱們能夠嘗試一下:

div {
    font-size:20px;
    margin:2em; /* 2倍於自身的 font-size */
}

利用這一點, 咱們來打破經典的 em 是相對於父元素大小的觀點:

body {
    font-size:40px;
}
div {
    font-size:20px;
    margin:2em; /* 我可沒有相對於 body 的 font-size 來進行計算 */
}

若是繼承父元素的 font-size 的大小, div 的 margin 計算值是 60px 而不是 最後的 40px , 顯然這個值是根據 div 自己的 font-size 來進行計算的.

因此在此以前咱們所瞭解的:

em 單位是相對於父元素的 font-size 來計算的

應該改爲:

em 單位是相對於元素的 font-size 來計算的, 可是不要忘記 font-size 會繼承 font-size 大小

而平常開發中 em 單位常見於字體單位的而不是其餘屬性的單位, 因此沒法看出 em 其實是相對於元素的 font-size , 由於 font-size 直接繼承了父元素的大小, 因此 em 的誤解也就一直存在了.