em 單位

借 Lea verou 的話：

當某些值相互依賴時，應該把它們的相互關係用代碼表達出來。

一般狀況下，咱們會但願字號和其餘尺寸可以跟父元素的字號創建關聯，此時em就很好的表達了這種關係。

在CSS Values and Units Module Level 3中，有一個相對長度單位em:

em unit
Equal to the computed value of the font-size property of the element on which it is used.

翻譯：

em 等價於元素font-size的計算值

那麼問題來了，若是元素的font-size用的是em單位呢？MDN指出：

For most font-relative units (such as em and ex), the font size is relative to the parent element's font size.

翻譯：

font-size 屬性的em和ex單位值相對於父元素的字號

這其實意味着，font-size的em和%單位的做用是同樣的。

到這裏爲止em的用法已經清楚了：

1. 默認繼承父元素的font-size，若是經過em顯示指定元素的font-size，做用等於%，相對於父元素的font-size計算。
2. 元素的其餘屬性使用em單位，em等價於元素font-size的計算值

注意兩點，

1. font-size默認會繼承，可是諸如替換元素（諸如button、input），不會繼承，規範上大意是說，替換元素的樣式超出了 CSS 的範疇。
2. line-height用em時，直觀來看，等價於用數字，可是繼承的時候會出現問題，因此line-height一般推薦用數字而不是用em。

好比：

.green {
  line-height: 1.1;
  border: solid limegreen;
}

.red {
  line-height: 1.1em;
  border: solid red;
}

h1 {
  font-size: 30px;
}

.box {
  width: 18em;
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
}

<div class="box green">
 <h1>Avoid unexpected results by using unitless line-height.</h1>
  length and percentage line-heights have poor inheritance behavior ...
</div>

<div class="box red">
 <h1>Avoid unexpected results by using unitless line-height.</h1>
  length and percentage line-heights have poor inheritance behavior ...
</div>

<!-- The first <h1> line-height is calculated from its own font-size   (30px × 1.1) = 33px  --> 
<!-- The second <h1> line-height results from the red div's font-size  (15px × 1.1) = 16.5px,  probably not what you want -->

結果如圖：