Skip to content

建立 2026-09-15 更新 2026-09-15

間距與尺寸

Tailwind 的間距數字不是隨意取的：預設 1 個單位是 0.25rem（通常等於 4px）。p-4 就是 1rem 的 padding，gap-8 就是 2rem 的間隙。先記住這個尺度，就不必每次查「4 到底是多少」。

最常用的一組

前綴 作用 例子
p- / px- / py- / pt-… padding px-4 py-2
m- / mx- / my- / mt-… margin mx-auto、mt-8
gap- Flex／Grid 子項間距 gap-4
space-x- / space-y- 子項之間的 margin（沒開 flex 時常用） space-y-4
w- / h- 寬高 w-full、h-12
max-w- 最大寬度 max-w-md、max-w-prose
size- 同時設寬與高 size-10

置中一塊有限寬內容，幾乎永遠是：

<div class="mx-auto max-w-3xl px-4">
  ...
</div>

mx-auto 把左右 margin 均分；max-w-3xl 限制閱讀寬度；px-4 讓窄螢幕不要貼齊邊緣。

數字怎麼對

常見對照（根字級 16px 時）：

  • 1 → 0.25rem（4px）
  • 2 → 0.5rem（8px）
  • 4 → 1rem（16px）
  • 8 → 2rem（32px）
  • 16 → 4rem（64px）

v4 對「整數間距」比 v3 寬鬆，p-7 這類值大多可直接用。日常仍建議待在 2、4、8、12 這組，版面比較容易對齊。完整表見 Padding 與 Width。

相關資料