代碼片段 2.1：在padding上使用em

.padded {
  font-size: 16px;
  padding: 1em;          1
}

1 把各個方向的padding的值設置為字號大小

把padding賦值為1em，乘以字號，得到一個值為16px的padding渲染值。重點來了，使用相對單位聲明的值會由瀏覽器轉化為一個絕對值，我們稱之為計算值。

在這個例子里，將padding改為2em會生成一個32px的計算值。如果同一個元素的另一個選擇器，用一個不一樣的字號值去覆蓋它，這會改變em在這個域下的基準值，那么padding的計算值也會相應變化。

在設置padding、height、width或border-radius等屬性時，使用em可能會很方便，因為如果它們繼承了不同的字號大小，或者用戶更改了字體設置，這些屬性會均勻地縮放。

圖2.2展示了兩個不同大小的盒子。盒子內的font-size、padding和border-radius各不相同。

[ 圖 2.2：有相對大小的padding和border-radius的元素 ]

你可以通過用em聲明padding和border-radius來給這些盒子聲明樣式規則。首先給每個元素設定padding和border-radius為1em，然后給每個盒子指定不同的字號，那么其他屬性會跟著字號縮放。

在你的HTML代碼里，創建如下的兩個盒子，類名分別是box-small和box-large，代表兩個字號修飾符。

[ 代碼片段 2.2：在不同元素上使用em（HTML）]

Small
Large

現在，添加下面的樣式到你的樣式表。這里使用了em聲明了一個盒子。還定義了小字號和大字號的修飾符，指定不同的字號大小。

[ 代碼片段 2.3：在不同元素上使用em（CSS）]

.box {
  padding: 1em;
  border-radius: 1em;
  background-color: lightgray;
}

.box-small {
  font-size: 12px;              1
}

.box-large {
  font-size: 18px;              1
}

1 不同的字號大小，這會改變元素的em實際值的大小。

這是em一個強大的功能。你可以定義一個元素的字號大小，然后使用一句簡單的聲明，就可以通過改變字號大小從而控制整個元素大小縮放。你后面將會創建另外一個這樣的例子，不過首先，我們來討論一下em和字號大小。

當font-size使用em作為單位時，它的表現會有點不一樣。我之前說過，em是以當前元素的字號大小作為基準值的。但是，如果你把一個元素的字號設為1.2em的時候，這是什么意思呢？一個元素的字號大小是不能等于它自己的1.2倍的。相反，在font-size上的em會先從繼承到的字號大小衍生出來。

舉個簡單的例子，見圖2.3。以下展示了一些不同字號大小的文字。在代碼片段2.4，你會用到em來實現。

[ 圖 2.3 以em為單位的兩種不同的字號大小 ]

在你的頁面添加以下代碼片段。第一行文字，在標簽里面，它會按body的字號大小渲染。第二部分，口號（slogan），繼承父元素的字號大小。

[ 代碼片段 2.4 相對font-size的模板 ]

  We love coffee
  
We love coffee
          1

1 slogan從繼承了字號大小。

代碼片段中，CSS代碼片段聲明了body的字號大小。為了更加清晰，在這里我用了px來聲明。下一步，你可以用em來放大slogan的字號大小。

[ 代碼片段 2.5：在font-size上使用em ]

body {
  font-size: 16px;
}

.slogan {                  1
  font-size: 1.2em;        1
}                          1

1 計算：這個元素繼承到字號，乘以1.2

slogan聲明的字號大小是1.2em，為了計算轉換成像素值，你需要引用繼承的字號16px，16 * 1.2 = 19.2，所以計算字號值是19.2px。

提示 
如果你已經知道以px為單位的基礎字號大小，但希望把它改用em聲明，下面有個簡單的計算公式：目標em值 = 目標像素值 / 父元素（被繼承元素）像素值。舉個例子，如果你想要一個10px的字號大小，父元素的字號是12px，10 / 12 = 0.8333em。如果你想要16px的字號大小，父元素字號是12px，那么 16 / 12 = 1.3333em。我們會在這章里多次用到這個計算公式。

有一點對你很有幫助，對于大多數瀏覽器，默認字號大小是16px。技術上，關鍵字medium會被計算轉換為16px。

你已經使用過em聲明font-size了（基于一個繼承的字號大小值）。以及，你也曾經使用em聲明其他屬性，如padding和border-radius（基于當前元素的字號大小值）。當你針對同一個元素使用em聲明font-size和其他屬性的時候，em會變得很神奇。此時瀏覽器必須先計算font-size，然后基于這個值再去計算其他值。這些屬性聲明的時候使用的是相同的em值，但很可能它們會有不同的計算值。

在之前的例子里，我們計算到字號大小是19.2px（繼承的16px乘以1.2em）。圖2.4是相同的slogan元素，但有額外的1.2em padding以及為了讓padding大小更加明顯的灰色背景。可以看出，padding比font-size稍微大一些，盡管它倆聲明的時候em值是一樣的。

[ 圖2.4 一個font-size為1.2em以及padding為1.2em的元素 ]

現在的情況是，這個段落從body繼承了16px的字號大小，通過計算得到值為19.2px的字號計算值。這意味著，19.2px是1em在當前域的基礎值，而這個值會被用作計算padding的值。對應的CSS代碼在下面，更新你的樣式表并查看你的測試頁面吧。

[ 代碼片段 2.6 在font-size和padding上使用em ]

body {
  font-size: 16px;
}

.slogan {
  font-size: 1.2em;             1
  padding: 1.2em;               2
  background-color: #ccc;
}

1 賦值為 19.2 px

2 賦值為 23.04 px

在這個例子里，padding的聲明值為1.2em，乘以19.2px（當前元素的字號大小），計算出23.04px。我們可以看到，盡管font-size和padding聲明時em值是一樣的，但它們的計算值是不一樣的。

當你使用em聲明多層嵌套的元素字號時，會產生意想不到的效果。要弄清楚每個元素的實際值，首先你需要知道它繼承的父元素的字號大小，如果父元素的字號也是用em聲明的，那么你需要知道它的父元素的字號大小，在dom樹往上查，以此類推。

當你使用em聲明列表的字號大小，列表嵌套了好幾層，效果就更明顯了。大多數web開發者會發現在他們的職業生涯里面，圖2.5的列表嵌套形式有點眼熟。文字在逐步縮小！正是因為em帶來的這一類煩人的問題，開發者才對em避而遠之。

[ 圖 2.5 嵌套列表中的字號縮小現象 ]

當你多層嵌套列表，而每一層聲明的字號大小以em為單位，字號收縮現象就會發生。在代碼片段2.7和2.8的例子里，無序列表的字號是0.8em。這個選擇器對頁面上所有的ul有效，所以當一個列表從另外一個列表繼承到字號大小的時候，em就產生復合效果。

[ 代碼片段 2.7 在列表上使用em ]

body {
  font-size: 16px;
}

ul {
  font-size: .8em;
}

[ 代碼片段 2.8 多層嵌套的列表 ]

  
Top level
    
                                    1
      
Second level                      1
        
                                2
          
Third level                   2
            
                            3
              
Fourth level              3
                

                  
Fifth level
                
              
            
          
        
      
    
  

1 這個列表嵌套在第一個列表里，繼承了它的字號大小

2 然后這個列表又嵌套在另一個列表里，繼承了第二個列表的字號大小

3 ……以此類推

每一個列表的字號大小是0.8乘以父元素的字號大小。這代表第一個列表的字號大小是12.8px，嵌套的子列表字號大小是10.24px（12.8px * 0.8），第三層列表的是8.192px，如此類推。同樣地，如果你給字號大小的賦值大于1em，相反，文字的字號會一層層變大。我們想要的效果是像圖2.6一樣，在頂層聲明字號的大小，但下面嵌套層級的列表字號保持不變。

[ 圖 2.6 字號正常的多層嵌套列表 ]

其中一種實現的方式可以看看代碼片段2.9。第一個列表的字號大小還是0.8 em（見示例2.7），第二個選擇器對嵌套在無序列表的無序列表有效 —— 也就是除了第一個無序列表以外的所有無序列表。現在嵌套的列表設定了跟父元素一致的字號大小，正如圖2.6一樣。

[ 代碼片段 2.9 字號收縮現象的糾正 ]

ul {
  font-size: .8em;
}

ul ul {                1
  font-size: 1em;      1
}  

1 嵌套在列表里面的列表，應該把字號大小設定為跟父元素一樣

這可以解決問題，但不是最優方案。因為你設置了一個字號值，馬上用另一個選擇器重寫了這個規則。如果你可以使用針對嵌套的列表聲明一個特定的選擇器，避免互相覆蓋，會是一個更好的方案。

到現在我們清楚了，如果你不是一個比較小心的人，你應該遠離em。使用em作為padding、margin和元素縮放效果的單位挺好的，但當em遇上font-size時，事情可以變得很復雜。感謝上天，我們有個更好的選擇 —— rem。

（未完待續，請期待下一篇《如何更愉快地使用rem》）

《別說你懂CSS相對單位》系列譯文：

如何更愉快地使用em [本文]

如何更愉快地使用rem

視口相關單位的應用

無單位數字和行高

CSS自定義屬性

章節：

2.1 相對單位值的魔力

2.1.1 完美像素設計（pixel-perfect design）的掙扎

2.1.2 完美像素網頁的終結

像素（pixel）、點（point）和pc（pica）

2.2 em和rem

2.2.1 對font-size使用em

當我們在一個元素內用em同時聲明font-size和其他屬性

字號收縮問題

2.2.2 對font-size使用rem

可用性：對font-size使用相對長度單位

2.3 停止使用像素思維去思考

2.3.1 設置一個合理的字號默認值

2.3.3 讓這個面板變得“響應式”

2.3.3 調整單個組件的大小

2.4 視口相關單位（viewport-relative units）

CSS3

2.4.1 在font-size上使用vw

2.4.2 在font-size上使用calc()

2.5 不帶單位的數字（unitless number）和行高（line-height）

2.6 自定義屬性（也叫“CSS變量”）

2.6.1 動態改變自定義屬性的值

2.6.2 通過JavaScript改變自定義屬性的值

2.6.3 初探自定義屬性

總結

原著版權信息：  
?  
作者：Keith J.Grant  
書籍：CSS in Depth  
章節：Working with relative units

筆者 @Yuying Wu，前端愛好者 / 鼓勵師 / 新西蘭打工度假 / 鏟屎官。目前就職于某大型電商的B2B前端團隊。

感謝你讀到這里，對上文若有任何疑問或建議，歡迎留言。

如果你和我一樣喜歡前端，喜歡搗騰獨立博客或者前沿技術，或者有什么職業疑問，歡迎關注我以及各種交流哈。

獨立博客：wuyuying.com
知乎ID：@Yuying Wu
Github：Yuying Wu