间距与尺寸

间距(padding/margin)和尺寸(width/height)是 CSS 里最频繁出现的两类属性。Tailwind 把它们系统化为"以 4px 为基础单位"的比例尺,这是它约束系统的核心体现。本篇详解这四大系列。

1. 4px 比例尺的设计哲学

Tailwind 规定所有间距必须是 4px 的倍数(少数特殊情况除外)。所以:

乍看是"被限制了",实则这是 Tailwind 最大的优势之一:你不再纠结"用 13px 还是 14px",只能从比例尺里选,设计天然一致。全站间距都遵循同一套节奏,看起来就专业。

2. padding 系列

p-* 是 padding(内边距)。配合方向后缀可以精准控制各方向:

<!-- padding 系列:数字代表 4px 的倍数 -->
<div class="p-4">       <!-- padding: 16px(四周) -->
<div class="p-8">       <!-- padding: 32px -->
<div class="px-4">      <!-- padding-left/right: 16px(左右) -->
<div class="py-2">      <!-- padding-top/bottom: 8px(上下) -->
<div class="pt-4">      <!-- padding-top: 16px -->
<div class="pr-2">      <!-- padding-right: 8px -->
<div class="pb-8">      <!-- padding-bottom: 32px -->
<div class="pl-0">      <!-- padding-left: 0 -->

<!-- 完整比例尺(摘录):
     p-0  => 0
     p-1  => 4px
     p-2  => 8px
     p-3  => 12px
     p-4  => 16px
     p-5  => 20px
     p-6  => 24px
     p-8  => 32px
     p-10 => 40px
     p-12 => 48px
     p-16 => 64px
     p-20 => 80px
     p-24 => 96px
     p-32 => 128px -->

方向后缀要熟记:

3. margin 系列

m-* 是 margin(外边距),命名规律和 padding 完全一致。最经典的写法是水平居中:

<!-- margin 系列:同样以 4px 为单位 -->
<div class="m-4">       <!-- margin: 16px(四周) -->
<div class="mx-auto">  <!-- margin: 0 auto(水平居中!经典写法) -->
<div class="my-8">     <!-- margin-top/bottom: 32px -->
<div class="mt-4">     <!-- margin-top: 16px -->
<div class="mb-2">     <!-- margin-bottom: 8px -->

<!-- 负边距:用 - 前缀,常用于"破格"效果 -->
<div class="-mt-4">   <!-- margin-top: -16px,向上挤压 -->
<div class="-mx-2">   <!-- margin: 0 -8px,允许内容超出 padding -->

负边距用 - 前缀,常用于"破格"效果——让元素向上挤压、或允许内容超出父元素 padding。

4. space-x / space-y:子元素等距

当你有一组兄弟元素需要两两之间等距时(比如垂直列表),用 space-y-* 或 space-x-* 比手动给每个子元素加 margin 方便得多:

<!-- 兄弟元素之间的等距间距(子元素之间加分隔,首尾不带) -->
<div class="space-y-4">
  <div>第一项</div>   <!-- 与下一项间距 16px -->
  <div>第二项</div>
  <div>第三项</div>
</div>

<div class="space-x-4 flex">
  <div>左</div>        <!-- 与右侧间距 16px -->
  <div>中</div>
  <div>右</div>
</div>

<!-- 注意:space-* 是给子元素加 margin 实现的,
     如果子元素本身有 margin 或自带背景,
     可能出现预期外的边距合并问题 -->

5. width 系列

宽度类是另一高频系列。除了像素值,Tailwind 还提供分数、百分比、视口单位:

<!-- 固定宽度 -->
<div class="w-16">     <!-- width: 64px -->
<div class="w-1/2">    <!-- width: 50% -->
<div class="w-1/3">    <!-- width: 33.33333% -->
<div class="w-2/3">    <!-- width: 66.66667% -->
<div class="w-full">   <!-- width: 100% -->
<div class="w-screen"> <!-- width: 100vw -->

<!-- 最大宽度(常用于限制内容可读宽度) -->
<div class="max-w-md">    <!-- max-width: 28rem(448px) -->
<div class="max-w-2xl">   <!-- max-width: 42rem(672px) -->
<div class="max-w-7xl">   <!-- max-width: 80rem(1280px) -->
<div class="max-w-none">  <!-- max-width: none -->

<!-- 最小宽度 -->
<div class="min-w-0">    <!-- min-width: 0(flex 子项防溢出) -->

max-w-* 系列尤其重要。它用于限制内容的最大宽度,提升可读性——文字行宽超过 80 字符就难读。常见的容器写法:

6. height 系列

高度的命名和宽度完全对称,但实际项目里高度用得少——大多数时候高度由内容撑开。几个常用的:

<!-- 高度 -->
<div class="h-8">      <!-- height: 32px -->
<div class="h-full">   <!-- height: 100%(父元素需有高度) -->
<div class="h-screen"> <!-- height: 100vh(全屏) -->
<div class="min-h-screen"> <!-- min-height: 100vh(整页布局) -->

<!-- 视口百分比 -->
<div class="h-1/2">    <!-- height: 50%(需父元素有高度) -->

7. 常见技巧

几个高频组合,值得记住:

<!-- 1. flex 子项防溢出:配合 min-w-0 让超长文本可省略 -->
<div class="flex">
  <div class="min-w-0 flex-1 truncate">超长文本会被截断...</div>
</div>

<!-- 2. 居中容器:max-w + mx-auto 是经典 -->
<main class="max-w-3xl mx-auto px-4">
  内容最多 768px 宽,左右自动留白
</main>

<!-- 3. 卡片间距统一用 gap-* 替代 margin(grid/flex 子项) -->
<div class="grid grid-cols-2 gap-4">
  <div>A</div>
  <div>B</div>
</div>

8. 自定义间距

如果默认比例尺不够用(比如要 p-18 = 72px),可以在配置里扩展:

后面"自定义配置"篇会详讲。建议优先用默认值,实在不够再扩展——保持全站节奏一致比"精确到像素"更重要。

小结

记住这张表:

掌握这些,你已经能拼出 80% 静态页面的骨架。下一篇我们学布局——怎么把这些元素排成 flex 行、grid 网格。

← 上一篇 Utility-first 原子化思想

下一篇 Flexbox 与 Grid 布局 →

✈️💬