關於
歡迎來到網頁工程C工作坊!工作坊的主要目的是為大家提供一些有關網頁設計及開發等等的熱門資訊,希望大家可以將資訊用於自己的作品上,以及能啟發大家的創作靈感!

推介開發工具:VS Code
聯絡

電郵:admin@chedevelopment.com

Facebook:http://fb.me/CheDevelopmentWorkshop

CodePen:https://codepen.io/chedevelopment

關於 聯絡
CSS (18)css單位 (4)em (3)
相關內容
CSS 單位基本介紹em 單位的使用 01em 與 rem 的分別
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 中的文字大小時,內邊間距也會跟據著同一比例放大或縮少