21. 间距控制：padding与margin

间距是 CSS 里最常用但也最容易写乱的属性。Tailwind 用一个统一的间距比例系统解决了这个问题。

间距比例体系

Tailwind 所有间距类共用同一套刻度。数字越大，间距越大：

数字	rem	px	常见用途
0	0	0	无间距
0.5	0.125rem	2px	极小间距
1	0.25rem	4px	紧凑元素内
2	0.5rem	8px	标签内部
3	0.75rem	12px	表单项
4	1rem	16px	默认内边距
6	1.5rem	24px	卡片内边距
8	2rem	32px	区域间距
12	3rem	48px	大区块间距
16	4rem	64px	页面级间距

padding：内边距

p-{size} 控制元素内容到边框的距离。

<div class="p-4">四周各 16px 内边距</div>

方向性 padding

类名	方向
pt-{size}	上（top）
pr-{size}	右（right）
pb-{size}	下（bottom）
pl-{size}	左（left）
px-{size}	水平（左右）
py-{size}	垂直（上下）

<!-- 经典的按钮内边距：水平大、垂直小 -->
<button class="px-4 py-2 bg-blue-500 text-white rounded">
  点击我
</button>

margin：外边距

m-{size} 控制元素边框到外部的距离。语法跟 padding 完全对称：

<div class="m-4">四周各 16px 外边距</div>
<div class="mt-2">上边距 8px</div>
<div class="mx-auto">水平居中</div>
<div class="my-8">垂直方向 32px 间距</div>

负值 margin

在类名前加 - 就是负值：

<div class="-mt-4">向上偏移 16px</div>
<div class="-mx-2">向两侧溢出 8px</div>

负 margin 常用于：

• 让元素突破容器边界
• 重叠效果
• 抵消父容器的 padding

<!-- 子元素宽度超出父容器，左右各溢出 16px -->
<div class="p-4">
  <div class="-mx-4 bg-blue-100 p-4">
    我跟父容器边缘齐平
  </div>
</div>

auto margin

mx-auto 是最常用的 auto margin，让块级元素水平居中：

<div class="mx-auto max-w-2xl">
  居中内容，最大宽度 672px
</div>

在 flex 容器中，ml-auto、mt-auto 等有特殊用途：

<div class="flex">
  <div>靠左</div>
  <div class="ml-auto">靠右</div>
</div>

space-between：子元素间距

space-x-{size} 和 space-y-{size} 是给子元素批量加间距的利器，不需要手动给每个子元素设 margin。

<!-- 水平排列，子元素之间 16px 间距 -->
<div class="flex space-x-4">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
</div>

<!-- 垂直排列，子元素之间 8px 间距 -->
<div class="space-y-2">
  <div>项目1</div>
  <div>项目2</div>
  <div>项目3</div>
</div>

它的工作原理是给除了第一个子元素外的所有子元素添加 margin-left（或 margin-top）。

反向间距

当 flex 方向是 flex-row-reverse 或 flex-col-reverse 时，需要配合 space-x-reverse / space-y-reverse，否则间距方向会反：

<div class="flex flex-row-reverse space-x-4 space-x-reverse">
  <!-- 反向排列，间距方向正确 -->
  <div>3</div>
  <div>2</div>
  <div>1</div>
</div>

实际应用：卡片组件

综合运用 padding、margin 和 space：

<div class="p-6 bg-white rounded-lg shadow">
  <h2 class="text-xl font-bold mb-2">卡片标题</h2>
  <p class="text-gray-600 mb-4">卡片内容描述文字...</p>
  <div class="flex space-x-2">
    <button class="px-4 py-2 bg-blue-500 text-white rounded">确认</button>
    <button class="px-4 py-2 border rounded">取消</button>
  </div>
</div>

• p-6 → 卡片内部留白
• mb-2 / mb-4 → 文本之间的间距
• space-x-2 → 按钮之间的间距
• px-4 py-2 → 按钮自身的内边距

间距一致性原则

说实话，间距这事儿看着简单，但乱起来真的能让人抓狂。我自己平时就遵循几个原则：

1. 坚持 4 的倍数：4、8、16、24、32、48、64……这就像音乐的节拍一样，保持住视觉节奏，页面就不会显得杂乱。我见过不少设计师一开始没注意，后面改起来特别痛苦。
2. 根据内容密度来定：信息密集的区域用 2-4 就够，大段落之间可以用 6-8，给人呼吸感。
3. padding 和 margin 分工明确：组件内部空间用 padding 定义，组件之间的距离用 margin 控制。这招让我少踩了不少坑。
4. 能用 gap/space- 就别逐个加 margin*：一组元素间距一致时，gap（flex/grid）或 space-*（子元素）既简洁又省心，后面改起来也方便。

本节小结

• p-{size} / m-{size} → 内/外边距
• px- / py- / pt- / pr- / pb- / pl- → 方向性
• -m-{size} → 负值 margin
• mx-auto → 水平居中
• space-x-{size} / space-y-{size} → 子元素间距
• 数字 × 4 ≈ 像素值（记忆技巧）