Tailwind CSS V4 间距完全指南（Margin / Padding / Space / 逻辑间距）

间距是 UI 一致性的核心。Tailwind CSS V4 对整套间距系统进行了底层重构：无限级数间距、全新逻辑间距、大幅优化 space 性能、原生 --spacing() 函数、更规范的流式布局方案。

相比 V3，V4 解决了「大页面 space 卡顿」「自定义间距受限」「多语言排版适配麻烦」三大痛点。本文系统讲解Padding、Margin、Space 流式间距、逻辑间距、自定义间距、最佳实践 + 避坑，附带完整可运行 Demo。

一、V4 间距核心升级（必看）

• 无限间距级数：不再限制 0–96，m-21、p-100 直接原生支持，无需配置
• 性能重构 space：重写 space-x / space-y 选择器，长列表不再卡顿
• 全新逻辑间距：支持 bs/es/mbs/mbe/pbs/pbe 适配横竖排版、多语言布局
• 原生 –spacing() 函数：CSS 中直接读取主题间距，统一设计规范
• 默认逻辑属性优先：px/py 底层映射 inline/block，更适配现代排版

二、核心概念：三种间距体系

Tailwind 间距只有三类，理清即可杜绝所有混乱：

• padding 内边距：元素内部留白，撑大容器
• margin 外边距：元素外部留白，推开相邻元素
• space 流式间距：父容器统一控制「子元素之间」的间距，不写死单个 margin

三、Padding 内边距（内容留白）

1. 全方位简写

p-4    /* 上下左右全部 1rem */
px-4   /* 左右（水平） */
py-4   /* 上下（垂直） */

2. 单方向精准控制

pt-4 pr-4 pb-4 pl-4
/* 上、右、下、左 */

3. V4 全新逻辑内边距（适配多语言/横竖屏）

逻辑属性不关注「上下左右」，只关注「阅读流向」，适配阿拉伯语、竖版排版。

pbs-4  /* block-start 顶部/起始边 */
pbe-4  /* block-end   底部/结束边 */
pis-4  /* inline-start 左/起始 */
pie-4  /* inline-end   右/结束 */

四、Margin 外边距（元素推开距离）

1. 常规外边距

m-4    /* 四周外边距 */
mx-4   /* 水平外边距 */
my-4   /* 垂直外边距 */
mt-4 mr-4 mb-4 ml-4

2. 水平居中万能公式

mx-auto  /* 左右自动，块级居中（页面容器必备） */

3. 负边距（V4 原生支持）

-mt-4 -ml-4

4. V4 逻辑外边距

mbs-4  block-start
mbe-4  block-end
mis-4  inline-start
mie-4  inline-end

五、Space 流式间距（V4 重点升级）

不要给每个子元素写 margin，用父容器统一控制子元素间距，干净、可维护、响应式友好。

1. 基础用法

space-x-4   /* 水平子元素间距 */
space-y-4   /* 垂直子元素间距 */

2. 反向间距

space-x-reverse
space-y-reverse

3. V4 重大优化

V3 的 space 选择器在千条列表会严重卡顿，V4 重构选择器逻辑，性能大幅提升，适合大数据列表。

4. Space 避坑（高频错误）

• space 只作用于直接子元素
• 只会给「后面的元素」加间距，不会给第一个元素加外边距
• 搭配 flex-wrap 自动换行完全兼容

六、V4 无限级数间距（彻底自由）

V3 只能用预设档位，V4 任意数字直接生效，无需任何配置：

p-21 m-34 space-y-120

原理：V4 间距尺度是连续数列，单位依然是 0.25rem 步进。

七、V4 专属 –spacing() 函数

在自定义 CSS、@utility 中读取主题规范间距，保证全局统一。

@utility card {
  padding: --spacing(6);
  margin-bottom: --spacing(8);
}

优势：后续统一修改主题--spacing 基准值，全局自动同步。

八、自定义间距尺度（V4 标准写法）

在 @theme 中全局修改基准间距，所有间距类全部联动变化。

@theme {
  --spacing: 0.26rem; /* 全局微调步进 */
}

V4 不再推荐手动扩展零散尺寸，优先修改基准实现整体规范。

九、响应式间距（V4 变体规则）

V4 变体从左到右生效，更符合直觉：

p-2 md:p-4 lg:p-6

小屏2、中屏4、大屏6，逐级增大。

十、业务最佳实践（规范团队UI）

1. 页面结构间距规范

• 模块间距：my-8 / mb-10
• 卡片内边距：p-4 ~ p-6
• 组件内部间距：space-y-4

2. 永远优先顺序

space 统一间距 > 全局 padding/margin > 单个自定义间距

3. 居中永远用 mx-auto

container mx-auto px-4

十一、高频避坑清单（V4 专属）

• ✅ V4 长列表放心用 space-x/space-y，性能无压力
• ✅ 多语言、横竖排版页面，优先用 pbs/pbe/mbs/mbe 逻辑间距
• ✅ 自定义组件统一用 --spacing() 函数，保持设计一致
• ✅ 超大间距直接写 p-20，无需扩展配置
• ❌ 不要再给列表子元素逐个写 margin，难以维护
• ❌ 不要混淆物理方向（top/left）和逻辑方向（block/inline）

十二、完整可运行 Demo（V4 CDN）

包含：常规内外边距、space 流式间距、逻辑间距、超大级数间距、–spacing() 自定义工具。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind V4 间距 Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  <style type="text/tailwindcss">
    @theme {
      --color-sp-demo: #165DFF;
    }
    /* V4 原生 spacing 函数 */
    @utility demo-card {
      padding: --spacing(6);
      margin-bottom: --spacing(8);
      border-radius: 12px;
      background: #f8fafc;
    }
  </style>
</head>
<body class="p-6 bg-slate-100">
  <h1 class="text-3xl font-bold text-center mb-10">V4 间距系统完整演示</h1>

  <!-- 1. Padding 内边距 -->
  <div class="p-6 mb-8 bg-white rounded-lg shadow">
    <h2 class="text-lg font-semibold mb-2">1. 常规 Padding 内边距 p-6</h2>
    <p>内容与边框的留白区域</p>
  </div>

  <!-- 2. Margin 外边距 + 居中 -->
  <div class="w-3/4 mx-auto mb-8 p-6 bg-blue-500 text-white rounded-lg shadow">
    <h2 class="text-lg font-semibold mb-2">2. Margin 居中 mx-auto</h2>
    <p>块级元素水平居中标准写法</p>
  </div>

  <!-- 3. Space 流式间距 -->
  <div class="flex space-x-4 mb-8 p-6 bg-white rounded-lg shadow">
    <span class="px-4 py-2 bg-slate-200 rounded">Item 1</span>
    <span class="px-4 py-2 bg-slate-200 rounded">Item 2</span>
    <span class="px-4 py-2 bg-slate-200 rounded">Item 3</span>
  </div>

  <!-- 4. V4 无限级数间距 -->
  <div class="p-[34px] mb-8 bg-emerald-500 text-white rounded-lg">
    <h2 class="text-lg font-semibold">4. V4 超大自定义间距 p-[34px] / p-21</h2>
  </div>

  <!-- 5. V4 逻辑间距 -->
  <div class="pbs-6 pbe-6 pis-4 pie-4 mb-8 bg-orange-100 rounded-lg">
    <h2 class="text-lg font-semibold">5. V4 逻辑间距 block / inline</h2>
    <p>适配任意阅读方向布局</p>
  </div>

  <!-- 6. --spacing() 自定义工具 -->
  <div class="demo-card">
    <h2 class="text-lg font-semibold mb-2">6. --spacing() 主题函数统一间距</h2>
    <p>全局规范统一，可主题一键修改</p>
  </div>

</body>
</html>

总结

Tailwind CSS V4 间距系统完成了性能、能力、规范性三重升级：解决 V3 长列表卡顿、支持无限间距、新增国际化逻辑间距、提供主题函数统一管控。

开发口诀：内边距用 p，外边距用 m，子元素统一间距用 space，多语言适配用逻辑属性，自定义规范用 –spacing()。

Tailwind CSS V4 间距速查表

配套上文，开发快速查阅，区分V4新增特性；单位基准：1 = 0.25rem，V4支持任意数字，无需额外配置

一、Padding 内边距（元素内部留白）

✅ V4 逻辑内边距（适配多语言/文字流向）

二、Margin 外边距（推开外部元素）

✅ V4 逻辑外边距

三、Space 子元素流式间距（父容器控制直接子元素间距）

要点：仅作用于直接子元素；只会给后面元素添加间距，第一个子元素不加。V4底层重构，长列表性能大幅提升。

四、V4专属特性

1. 无限级数间距p-21、m-100、space-y-45 直接可用，不需要扩展主题配置。
   也支持方括号任意值：p-[34px]
2. --spacing() 主题函数（CSS内使用）

@utility demo-card {
  padding: --spacing(6);
  margin-bottom: --spacing(8);
}

3. 自定义基准间距

@theme {
  --spacing: 0.26rem;
}

4. 响应式变体（V4变体顺序：左→右）

<p class="p-2 md:p-4 lg:p-6">

五、高频业务模板

<!-- 页面容器标准写法 -->
<div class="container mx-auto px-4"></div><!-- 子元素统一水平间距 -->
<div class="flex space-x-4">
  <div>项1</div>
  <div>项2</div>
</div>
<!-- 模块垂直间距 -->
<section class="mb-10"></section>
<!-- 卡片内边距 -->
<div class="p-4 md:p-6 rounded-lg"></div>

六、选型&避坑

1. 子元素之间统一间距 → 优先 space-x / space-y，不要逐个写margin
2. 元素内部留白 → padding
3. 元素和外部拉开距离 → margin
4. 国际化、多语言排版 → 使用逻辑属性 pbs/pbe/mbs/mbe
5. space 只对直接子元素生效，嵌套元素无效
6. V4变体从左向右生效，和V3相反