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

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

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

Image Not Showing Possible Reasons

直接子層的文字尺寸算法

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

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

例如：

但是 04 和 05 被包裹在 03 裡面，所以他們的上一層是以 03 的尺寸為依據，

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

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

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

以上圖為例，全部元素都一樣設定 margin-top: 1em 但實際呈現出來，02文字的上距，卻比05文字的上距小。

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