間距

間距在網頁中是不可或缺的，間距不僅能使版面看起來更舒服，也豐富了網頁版面的多樣性。

間距單位

• p/m-0 ⇒ 0px
• p/m-1 ⇒ 0.25rem / 4px
• p/m-2 ⇒ 0.5rem / 8px
• p/m-3 ⇒ 0.75rem /12px
• p/m-4 ⇒ 1rem / 16px
• …

Tailwind CSS 中，間距的數字會以 4 的倍數為單位，舉例來說：1.25rem（20px） 相當於 20 / 4 ⇒ p-5

Padding

元素內部推出空間。

全部側面

藉由 p-{size}，控制元素所有側面，舉個例子：

<div class="... p-8">全部推padding</div>

.p-8 {
  padding: 2rem;
}

單一側面

藉由 p-{t|r|b|l}-{size}，控制元素單一側面，舉個例子：

<div class="... pt-4">頂部推padding</div>

.pt-4 {
  padding-top: 1rem;
}

水平面

藉由 px-{size}，控制元素水平面，舉個例子：

<div class="... px-8">水平推padding</div>

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

垂直面

藉由 py-{size}，控制元素垂直面，舉個例子：

<div class="... py-8">垂直推padding</div>

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

Margin

元素外部推出空間。

全部側面

藉由 m-{size}，控制元素所有側面，舉個例子：

<div class="... m-4">全部推m</div>

.m-4 {
  margin: 1rem;
}

單一側面

藉由 m-{t|r|b|l}-{size}，控制元素單一側面，舉個例子：

<div class="... mr-2">右側推m</div>

.mr-2 {
  margin-right: 0.5rem;
}

水平面

藉由 mx-{size}，控制元素水平面，舉個例子：

<div class="... mx-4">水平推m</div>

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

垂直面

<div class="... my-4">垂直推m</div>

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

負值

使用負值，可以將元素間有重疊的效果，舉個例子：

<div class="... -mt-2"></div>

.-mt-2 {
  margin-top: -0.5rem;
}

Space Between

上面介紹完 padding 與 margin，接著來看我個人非常喜歡使用的 space between。
什麼是 space between？
簡單來說就是元素之間推 margin，不同的地方在於 space between 除了第一個元素，其他元素推 margin。

舉個例子，這裡有一段 HTML。

<div class="flex">
  <div class="w-10 h-10 bg-blue-700"></div>
  <div class="w-10 h-10 bg-blue-700 ml-4"></div>
  <div class="w-10 h-10 bg-blue-700 ml-4"></div>
  <div class="w-10 h-10 bg-blue-700 ml-4"></div>
</div>

上方有四個藍色方塊，若相鄰四個方塊之間要有距離，我們會給予標籤推上 ml-4，讓我們改用 space between 表示。

從下方得知，使用 space between 不需要標籤去寫多個 ml-4 ，在外層寫上 space-x-4 就有同樣效果，同理垂直的 space-y-4。

<div class="flex space-x-4">
  <div class="w-10 h-10 bg-blue-700"></div>
  <div class="w-10 h-10 bg-blue-700"></div>
  <div class="w-10 h-10 bg-blue-700"></div>
  <div class="w-10 h-10 bg-blue-700"></div>
</div>

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

codepen 連結

本日重點

1. padding 元素內部推出空間。
2. margin 元素外部推出空間。
3. space between 概念與 margin 相同，但 space between 除了第一個元素，其他元素推 margin。

參考

• Tailwind CSS 官網
• Tailwind CSS - Padding
• Tailwind CSS - Margin
• Tailwind CSS - Space Between