# em 單位用在設定距離時會受到字體大小影響

###### tags: `CSS`
em 是一種相對的的數值單位，是以文字大小為依據，而且會受到上一層父層容器的「文字大小」影響。

[Codepen範例](https://codepen.io/J_u_d_y/pen/xxyXGxJ?editors=1100)

1 em 預設是 16px，但隨著容器包裹越多層，內層的文字大小會以上一層容器的大小，去計算尺寸倍率來得出最後的文字實際大小。


## 直接子層的文字尺寸算法
最外層的文字是 1em，所以身為直接子層的 01文字設定 `font-size:1em`時，大小會跟外層相同。

而 01、02、03 文字位階相同，所以計算尺寸時都是以自己的 em 尺寸再去乘以最外層 1em。

例如：

- 02 文字`font-size: 1.5em`，實際尺寸就會是 `1.5 * 1 *16` = 24px。
- 03 文字同位階，同樣 `font-size: 1.5em` = 24px。

## 子層再多包一層的文字尺寸算法
但是 04 和 05 被包裹在 03 裡面，所以他們的上一層是以 03 的尺寸為依據，

04 文字雖然設定 `font-size: 1em` ，實際文字大小計算：

(自己的em)`*` (03文字尺寸) = `1*(1.5 * 1 *16)`= 24px

05 文字則是 = `3*(1.5 * 1 *16)`= 72px

## margin 若用 em 當作單位，實際距離也會受到文字大小影響
以上圖為例，全部元素都一樣設定 `margin-top: 1em` 但實際呈現出來，02文字的上距，卻比05文字的上距小。

用 em 指定距離時，會以字體大小為依據，例如：

- 「02文字」實際文字大小是 24px，設定 `margin-top: 1em` 換算後實際的上距會是 `margin-top: 24px`。

- 「05文字」實際文字大小是 72px，設定 `margin-top: 1em` 換算後實際的上距會是 `margin-top: 72px` 。

### `em`單位的倍率特性，如果元素結構上包了很多層，使用時就要比較注意是以何者為計算依據。

參考文章： [六角學院：實際展示 EM 與 REM 的差異](https://www.hexschool.com/2016/01/02/2016-08-08-em-vs-rem/)