em 單位的使用 02
em 除了用作設定文字大小（font-size）之外，最常用的地方便是設定區域的外邊間距（margin）及內邊間距（padding）。
要注意是當使用 em 作為間距單位時，1em 即是代表當前區域的文字大小，若當前區域有設定文字大小的（例如 1.5em），間距的 1em 是會以文字大小 1.5em 作為基礎。看看以下例子：
HTML
<div id="box1">
<div id="box2">
Testing
</div>
</div>CSS
#box1 {
font-size:20px;
}
#box2{
font-size: 1.2em;
margin: 1em;
padding: 1.5em;
}box1 的文字大小設定為 20px
box2 的上層是 box1，所以當設定 font-size: 1.2em 時，即是 1.2 x 20px 為 box2 的文字大小
box2 的 margin: 1em 設定：因為 box2 的文字設定為 1.2em（1.2 x 20px），而區域的外距是以當前區域文字大小作基礎，即是 1em 實則是等於box2 的文字大小（1.2 x 20px），而非等於上層 box1 的文字大小（20px）。
box2 的 padding: 1.5em：同樣地內距也是以當前文字大小作為基礎，1.5em 即是當前區域 box2 文字大小的 1.5 陪（1.5 x 1.2 x 20px）
使用 em 作為邊間單位的好處是可因應區域中文字的大小而自動調節間距，可維持版面設計的比例。看看以下例子：
HTML
<div id="box">
<div id="b1" class="button">
Hello
</div>
<div id="b2" class="button">
Hello
</div>
<div id="b3" class="button">
Hello
</div>
</div>CSS
#box {
background-color: lightgreen;
padding: 10px;
margin: 10px;
text-align:center;
}
.button{
border: 1px solid #000000;
padding: .5em 1.5em;
text-align:center;
display:inline-flex;
background-color: lightblue;
}
#b1{
font-size: 1em;
}
#b2{
font-size: 1.5em;
}
#b3{
font-size: 2em;
}例子中 3 個 button 的內距設定都為 padding: .5em 1.5em 分別為上下 0.5 em 及左右 1.5em
當變更 button 中的文字大小時，內邊間距也會跟據著同一比例放大或縮少