Spacing
設定元素或組件的間距與內距的通用類別。有以下九種數值可供使用，單位以 Pixel 計算 (以下說明 {value} 表示)：
- 0: 0px
- 5: 5px
- 10: 10px
- 15: 15px
- 20: 20px
- 30: 30px
- 40: 40px
- 50: 50px
- auto
還有以下六種方位可選擇 (以下說明 {pos} 表示)：
- X: 表示水平兩側，包含 Left 與 Right。
- Y: 表示垂直兩方，包含 Top 與 Bottom。
- T: 表示上方。
- R: 表示右方。
- B: 表示下方。
- L: 表示左方。
Padding
padding Breakpoints
可設置元素或元件的內容與框線之間的空間，通稱內距。使用類別名稱前綴詞為 .u-p{pos}{@bp}:。
範例
四面 Padding 設置：
<div class="u-p:0"></div>
<div class="u-p:20"></div>
<div class="u-p:50"></div>
X軸與Y軸各別的 Padding 設置：
<div class="u-pX:20"></div>
<div class="u-pY:20"></div>
四面各別的 Padding 設置：
<div class="u-pT:20"></div>
<div class="u-pR:20"></div>
<div class="u-pB:20"></div>
<div class="u-pL:20"></div>
搭配斷點的 Padding 設置：
<div class="u-pT@sm:20"></div>
<div class="u-pR@md:20"></div>
<div class="u-pB@lg:20"></div>
<div class="u-pL@xl:20"></div>
Margin
margin Breakpoints
可設置元素或元件的內容與框線之間的空間，通稱內距。使用類別名稱前綴詞為 .u-m{pos}{@bp}:。
範例
四面 Margin 設置：
<div class="u-m:0"></div>
<div class="u-m:20"></div>
<div class="u-m:50"></div>
X軸與Y軸各別的 Margin 設置：
<div class="u-mX:20"></div>
<div class="u-mY:20"></div>
使用 Margin 讓區塊元素置中的方法：
<div class="u-mX:auto"></div>
四面各別的 Padding 設置：
<div class="u-mT:20"></div>
<div class="u-mR:20"></div>
<div class="u-mB:20"></div>
<div class="u-mL:20"></div>
搭配斷點的 Padding 設置：
<div class="u-mT@sm:20"></div>
<div class="u-mR@md:20"></div>
<div class="u-mB@lg:20"></div>
<div class="u-mL@xl:20"></div>