em是CSS中一個比較常用的相對單位，因此有必要注意一些坑點。
1em等於當前元素的字型大小，除非你在設定font-size
有很多文章說1em是等於父元素的字型大小！這種說法實際上是不準確的。看以下例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
font-size: 16px;
}
div {
font-size: 32px;
padding-bottom: 2em;
background-color: aquamarine;
}
</style>
</head>
<body>
<div></div>
</body>
</html><div>會被padding-bottom撐開，而padding-bottom的高度是64px，而不是32px！這證明了1em等於當前元素的字型大小（只有一個例外，下面會講）。
字型大小和長度有什麼關係呢？字型不是一個方塊嗎？實際上，字型大小被定義為
M的寬度。
為什麼有人誤認為1em等於父元素的字型大小呢？這是因為如果在設定font-size的時候使用em單位，此時font-size還是預設值inherit，因此此時1em還等於父元素的字型大小。這是在設定font-size時才有的特例！這個特例很好理解，畢竟我正在設定當前元素的字型大小呢！總不能使用此刻正在設定的字型大小作為單位吧！這不是悖論嗎！
舉個例子，如果這個悖論真的發生了，就會出現以下情況：水果店老闆對你說：“你要多少斤橘子，我給你裝起來”，而你卻對老闆說：“我要的數量是我最終要的數量的2倍”。這個時候水果店老闆估計就要崩潰了，他到底要給你裝多少橘子呢？
為了避免這種事情發生，在你指定數量的時候如果使用相對單位，那這個單位必定不能相對於你此刻所指定的數量。你可以對老闆這樣說：“我要的數量是上一個顧客買的2倍”（類比於設定font-size: 2em）。當你買完橘子以後，又可以對老闆這樣說：“我還要一些蘋果，數量是剛才買的橘子的2倍”（類比於設定padding-bottom: 2em）。
除了這個特例以外，當設定其他css屬性的時候，1em就等於當前元素的字型大小。
在上面的例子中，設定font-size的時候使用em，就能證明這個特例的存在：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
font-size: 16px;
}
div {
font-size: 2em; /* 僅僅這一行改變了！ */
padding-bottom: 2em;
background-color: aquamarine;
}
</style>
</head>
<body>
<div></div>
</body>
</html>最終高度依然是64px，因為在設定font-size的時候，1em == 16px；在設定padding-bottom的時候，1em 就等於 32px 了。
如果在根元素上的font-size使用em會怎麼樣呢？它沒有父元素了啊！沒關係，對於inherited properties（其中就包括font-size），在根元素上的預設值為initial，對於大部分瀏覽器，font-size的initial值就是16px。因此在設定根元素上的font-size時，它的值還是16px，1em也就等於16px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html {
/* 2*16px=32px */
font-size: 2em;
}
div {
/* 2*32px=64px */
font-size: 2em;
/* 2*64px=128px */
padding-bottom: 2em;
background-color: aquamarine;
}
</style>
</head>
<body>
<div></div>
</body>
</html>