相信在座的看倌都知道 marge、padding 是做什麼用的，還不知道的同學可能要自行補一下 CSS，威爾豬在這邊就不多說了。這邊不要再用自以為聰明的蠢方法 m-15、p-30 之類方式來寫 CSS 了，理由在文字篇有講過，就不重複說明。

外邊界 (Marge)：

Tailwind 預設已幫我們寫好常用的數值，其實和 Bootstrap 4 之前的寫法一樣，margin 為 m-，margin-top 為 mt-，margin-bottom 為 mb-，margin-left 為 ml-，margin-right 為 mr-，預設使用方式為 m{ t | b | l | r }-{數值}，不過 Bootstrap 5 左右邊已經改為 ms-、me-，應該是為了對應 Flex 吧，千萬不要搞混了。

這邊威爾豬也幫大家整理了 rem 對應的 px 值，如下表。可能有同學會問，這麼多奇怪的數值，哪背得起來 class 對應的到底是多少 px？(等等寫錯設計師又會來檢查我的眼睛)。威爾豬教大家簡單的方式，只要你沒改原本預設的設定，後面的 數值 X 4，就是多少 px 啦。例如 margin-bottom: -20px;，那 class 就為 -mb-5。

別忘了 margin 可以有負值。

內邊距 (Padding)：

和 margin 寫法一樣，padding 為 p-，pdding-top 為 pt-，pdding-bottom 為 pb-，pdding-left 為 pl-，pdding-right 為 pr-，預設使用方式為 p{ t | b | l | r }-{數值}，不過別忘了 padding 可沒有負值喔。

左右一樣的外邊界 ＼ 內邊距

使用方式為：mx-{數值} ＼ px-{數值}。

左右 外邊界 ＼ 內邊距 為 20px 的寫法就是 mx-5 ＼ px-5。

水平置中為：mx-auto。

上下一樣的外邊界 ＼ 內邊距

使用方式為：my-{數值} ＼ px-{數值}。

上下 外邊界 ＼ 內邊距 為 16px 的寫法就是 my-4 ＼ py-4。

自訂間距

一般正常情況下，設計師通常會設定 4px 或 8px 的倍數來進行版面設計，但如果你的設計師是用 5px 倍數設計怎辦？沒關係，我們也可以自定義。

如果想一次性定義 margin、padding、width、height、maxHeight、gap、inset、space、translate 等的值，請使用設定檔 tailwind.config.js 中 theme 的 spacing 加入設定值，這時以上項目間距都會被繼承。範例如下：

  // tailwind.config.js
  
  module.exports = {
    theme: {
      ... ,
      spacing: {
       1: '5px',
       2: '10px',
       3: '15px',
       4: '20px',
       6: '30px',
       8: '40px',
       10: '50px',
       12: '60px',
       16: '80px',
       ... 
      },
      ... 
    },
  }

如果只想修改其中一個項目，將 spacing 替換成想修改的項目就可以了，如 margin。

另外還有子元素之間間隔：space-{ x | y }-{數值}，有興趣的同學再自行研究，原理和上面的 margin、padding 差不多。

字母間距

有時候設計師使用文字間距，會讓畫面看起來更合適。Tailwind 也預設了幾個方便我們使用，使用方式：tracking-，注意這邊預設單位為 em。來看看字距有啥變化：

<p class="tracking-tighter">Hello Tailwind!</p>
<p class="tracking-tight">Hello Tailwind!</p>
<p class="tracking-normal">Hello Tailwind!</p>
<p class="tracking-wide">Hello Tailwind!</p>
<p class="tracking-wider">Hello Tailwind!</p>
<p class="tracking-widest">Hello Tailwind!</p>

如果想修改，使用設定檔 tailwind.config.js 中 theme 的 letterSpacing 來修改吧，方式和往常一樣。那麼今天就先到這，咱們明天見。