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="[email protected]:20"></div> <div class="[email protected]:20"></div> <div class="[email protected]:20"></div> <div class="[email protected]: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="[email protected]:20"></div> <div class="[email protected]:20"></div> <div class="[email protected]:20"></div> <div class="[email protected]:20"></div>