跳到主要内容

间距控制

间距是页面布局中最重要的概念之一。Tailwind CSS 提供了一套统一的间距系统，用于控制内外边距、间隙等。本章将详细介绍如何使用间距工具类。

间距比例系统​

Tailwind 使用一个统一的比例系统来定义间距值，默认基于 4px 的增量。

默认间距比例​

类名后缀值像素值
000px
px1px1px
0.50.125rem2px
10.25rem4px
1.50.375rem6px
20.5rem8px
2.50.625rem10px
30.75rem12px
3.50.875rem14px
41rem16px
51.25rem20px
61.5rem24px
71.75rem28px
82rem32px
92.25rem36px
102.5rem40px
112.75rem44px
123rem48px
143.5rem56px
164rem64px
205rem80px
246rem96px
287rem112px
328rem128px
369rem144px
4010rem160px
4411rem176px
4812rem192px
5213rem208px
5614rem224px
6015rem240px
6416rem256px
7218rem288px
8020rem320px
9624rem384px

内边距（Padding）​

内边距控制元素内容与边框之间的空间。

四个方向​

<div class="p-4">四个方向都是 1rem</div>
<div class="p-8">四个方向都是 2rem</div>
<div class="p-0">无内边距</div>

水平方向​

<div class="px-4">左右内边距 1rem</div>
<div class="px-8">左右内边距 2rem</div>

垂直方向​

<div class="py-4">上下内边距 1rem</div>
<div class="py-8">上下内边距 2rem</div>

单方向​

<div class="pt-4">上内边距 1rem</div>
<div class="pr-4">右内边距 1rem</div>
<div class="pb-4">下内边距 1rem</div>
<div class="pl-4">左内边距 1rem</div>

方向修饰符说明​

修饰符方向
ttop（上）
rright（右）
bbottom（下）
lleft（左）
x水平方向（左右）
y垂直方向（上下）
无四个方向

逻辑属性​

支持 RTL（从右到左）语言的逻辑属性：

<div class="ps-4">起点内边距（LTR 时等于左）</div>
<div class="pe-4">终点内边距（LTR 时等于右）</div>

外边距（Margin）​

外边距控制元素与其他元素之间的空间。

四个方向​

<div class="m-4">四个方向都是 1rem</div>
<div class="m-8">四个方向都是 2rem</div>
<div class="m-0">无外边距</div>

水平方向​

<div class="mx-4">左右外边距 1rem</div>
<div class="mx-auto">水平居中</div>

垂直方向​

<div class="my-4">上下外边距 1rem</div>
<div class="my-8">上下外边距 2rem</div>

单方向​

<div class="mt-4">上外边距 1rem</div>
<div class="mr-4">右外边距 1rem</div>
<div class="mb-4">下外边距 1rem</div>
<div class="ml-4">左外边距 1rem</div>

负值外边距​

使用负号前缀设置负值：

<div class="-mt-4">上外边距 -1rem</div>
<div class="-mr-4">右外边距 -1rem</div>
<div class="-mb-4">下外边距 -1rem</div>
<div class="-ml-4">左外边距 -1rem</div>
<div class="-mx-4">左右外边距 -1rem</div>
<div class="-my-4">上下外边距 -1rem</div>

负边距常用于创建重叠效果或扩展元素宽度：

<div class="relative bg-gray-200 p-8">
  <div class="bg-blue-500 -mx-8 px-8 py-4 text-white">
    扩展到父容器边缘
  </div>
</div>

间隙（Gap）​

间隙用于设置 Flexbox 或 Grid 子元素之间的间距。

统一间隙​

<div class="flex gap-4">
  <div class="bg-blue-500 p-4">1</div>
  <div class="bg-blue-500 p-4">2</div>
  <div class="bg-blue-500 p-4">3</div>
</div>

<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-500 p-4">1</div>
  <div class="bg-blue-500 p-4">2</div>
  <div class="bg-blue-500 p-4">3</div>
  <div class="bg-blue-500 p-4">4</div>
  <div class="bg-blue-500 p-4">5</div>
  <div class="bg-blue-500 p-4">6</div>
</div>

水平间隙​

<div class="flex gap-x-4">
  <div class="bg-blue-500 p-4">1</div>
  <div class="bg-blue-500 p-4">2</div>
  <div class="bg-blue-500 p-4">3</div>
</div>

垂直间隙​

<div class="flex flex-col gap-y-4">
  <div class="bg-blue-500 p-4">1</div>
  <div class="bg-blue-500 p-4">2</div>
  <div class="bg-blue-500 p-4">3</div>
</div>

子元素间距​

space 工具类用于设置相邻子元素之间的间距，与 gap 的区别在于它使用 margin 实现。

垂直间距​

<div class="space-y-4">
  <div class="bg-blue-500 p-4">1</div>
  <div class="bg-blue-500 p-4">2</div>
  <div class="bg-blue-500 p-4">3</div>
</div>

水平间距​

<div class="flex space-x-4">
  <div class="bg-blue-500 p-4">1</div>
  <div class="bg-blue-500 p-4">2</div>
  <div class="bg-blue-500 p-4">3</div>
</div>

反向间距​

<div class="flex flex-row-reverse space-x-4 space-x-reverse">
  <div class="bg-blue-500 p-4">1</div>
  <div class="bg-blue-500 p-4">2</div>
  <div class="bg-blue-500 p-4">3</div>
</div>

space 与 gap 的区别​

特性spacegap
实现方式使用 margin使用 gap 属性
最后一个元素有 margin无 gap
响应式需要额外处理自动处理
推荐使用兼容旧浏览器现代浏览器

宽度和高度​

Tailwind 提供了丰富的尺寸工具类。

宽度​

<div class="w-0">宽度 0</div>
<div class="w-px">宽度 1px</div>
<div class="w-1">宽度 0.25rem</div>
<div class="w-4">宽度 1rem</div>
<div class="w-8">宽度 2rem</div>
<div class="w-64">宽度 16rem</div>
<div class="w-96">宽度 24rem</div>

<div class="w-auto">自动宽度</div>
<div class="w-1/2">宽度 50%</div>
<div class="w-1/3">宽度 33.333%</div>
<div class="w-2/3">宽度 66.666%</div>
<div class="w-1/4">宽度 25%</div>
<div class="w-3/4">宽度 75%</div>
<div class="w-full">宽度 100%</div>
<div class="w-screen">宽度 100vw</div>
<div class="w-min">宽度 min-content</div>
<div class="w-max">宽度 max-content</div>
<div class="w-fit">宽度 fit-content</div>

高度​

<div class="h-0">高度 0</div>
<div class="h-px">高度 1px</div>
<div class="h-4">高度 1rem</div>
<div class="h-8">高度 2rem</div>
<div class="h-64">高度 16rem</div>

<div class="h-auto">自动高度</div>
<div class="h-1/2">高度 50%</div>
<div class="h-full">高度 100%</div>
<div class="h-screen">高度 100vh</div>
<div class="h-min">高度 min-content</div>
<div class="h-max">高度 max-content</div>
<div class="h-fit">高度 fit-content</div>

最小/最大尺寸​

<div class="min-w-0">最小宽度 0</div>
<div class="min-w-full">最小宽度 100%</div>
<div class="max-w-xs">最大宽度 20rem</div>
<div class="max-w-sm">最大宽度 24rem</div>
<div class="max-w-md">最大宽度 28rem</div>
<div class="max-w-lg">最大宽度 32rem</div>
<div class="max-w-xl">最大宽度 36rem</div>
<div class="max-w-2xl">最大宽度 42rem</div>
<div class="max-w-3xl">最大宽度 48rem</div>
<div class="max-w-4xl">最大宽度 56rem</div>
<div class="max-w-5xl">最大宽度 64rem</div>
<div class="max-w-6xl">最大宽度 72rem</div>
<div class="max-w-7xl">最大宽度 80rem</div>
<div class="max-w-full">最大宽度 100%</div>
<div class="max-w-none">无最大宽度限制</div>

<div class="min-h-0">最小高度 0</div>
<div class="min-h-full">最小高度 100%</div>
<div class="min-h-screen">最小高度 100vh</div>
<div class="max-h-full">最大高度 100%</div>
<div class="max-h-screen">最大高度 100vh</div>

实战示例​

按钮间距​

<div class="flex gap-4">
  <button class="bg-blue-500 text-white px-4 py-2 rounded">按钮 1</button>
  <button class="bg-blue-500 text-white px-4 py-2 rounded">按钮 2</button>
  <button class="bg-blue-500 text-white px-4 py-2 rounded">按钮 3</button>
</div>

卡片布局​

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md">
  <div class="mb-4">
    <h3 class="text-xl font-semibold">卡片标题</h3>
  </div>
  <p class="text-gray-600 mb-4">
    这是卡片的描述内容，包含一些示例文字。
  </p>
  <button class="w-full bg-blue-500 text-white py-2 rounded">
    操作按钮
  </button>
</div>

表单布局​

<form class="max-w-md mx-auto space-y-6">
  <div>
    <label class="block text-gray-700 mb-2">用户名</label>
    <input class="w-full px-4 py-2 border rounded" type="text">
  </div>
  <div>
    <label class="block text-gray-700 mb-2">邮箱</label>
    <input class="w-full px-4 py-2 border rounded" type="email">
  </div>
  <div>
    <label class="block text-gray-700 mb-2">密码</label>
    <input class="w-full px-4 py-2 border rounded" type="password">
  </div>
  <button class="w-full bg-blue-500 text-white py-3 rounded">
    注册
  </button>
</form>

列表布局​

<ul class="space-y-3">
  <li class="flex items-center gap-3 p-4 bg-white rounded-lg shadow">
    <span class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white">1</span>
    <span>列表项一</span>
  </li>
  <li class="flex items-center gap-3 p-4 bg-white rounded-lg shadow">
    <span class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white">2</span>
    <span>列表项二</span>
  </li>
  <li class="flex items-center gap-3 p-4 bg-white rounded-lg shadow">
    <span class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white">3</span>
    <span>列表项三</span>
  </li>
</ul>

全屏布局​

<div class="min-h-screen flex flex-col">
  <header class="bg-blue-500 text-white p-4">
    导航栏
  </header>
  <main class="flex-1 p-8">
    主要内容区域
  </main>
  <footer class="bg-gray-800 text-white p-4">
    页脚
  </footer>
</div>

小结​

本章介绍了 Tailwind CSS 的间距控制系统：

  • 间距比例：基于 4px 的统一比例系统
  • 内边距：使用 p、px、py、pt 等控制
  • 外边距：使用 m、mx、my、mt 等控制，支持负值
  • 间隙：使用 gap、gap-x、gap-y 控制 Flex/Grid 子元素间距
  • 子元素间距：使用 space-x、space-y 控制
  • 尺寸：使用 w、h、min-w、max-w 等控制宽高

下一章，我们将学习 Tailwind CSS 的响应式设计。