tailwindcss-spacing

Tailwind CSS v4.3 间距工具的完整参考：外边距（`m-*` 及各边变体、负外边距、`m-auto` 居中）、内边距（`p-*` 及各边变体）、逻辑块轴外边距/内边距（`mbs-*`/`mbe-*`/`pbs-*`/`pbe-*`，自 v4.2 起支持），以及子元素间距（用于 flex/grid 子元素的 `space-x-*`/`space-y-*`）。

介绍可配置的间距比例（--spacing 基础单位，默认为 0.25rem）以及常见组合模式（居中容器、带内边距的卡片、纵向堆叠的子元素）。

Tailwind CSS 间距工具

Tailwind CSS v4.3 间距工具的完整参考：外边距、内边距和子元素间距。

快速参考

外边距类

• m-{size}：所有边的外边距
• mx-{size}：水平方向（左 + 右）
• my-{size}：垂直方向（上 + 下）
• mt-{size}：上外边距
• mr-{size}：右外边距
• mb-{size}：下外边距
• ml-{size}：左外边距
• -m-{size}：负外边距
• m-auto：自动外边距（居中）

内边距类

• p-{size}：所有边的内边距
• px-{size}：水平方向（左 + 右）
• py-{size}：垂直方向（上 + 下）
• pt-{size}：上内边距
• pr-{size}：右内边距
• pb-{size}：下内边距
• pl-{size}：左内边距

逻辑块轴类（自 v4.2 起支持）

• mbs-{size} / mbe-{size}：margin-block-start / margin-block-end
• pbs-{size} / pbe-{size}：padding-block-start / padding-block-end
• 对应的行内轴类：ms-*/me-*、ps-*/pe-*

子元素间距

• space-x-{size}：flex/grid 子元素之间的水平间距
• space-y-{size}：flex/grid 子元素之间的垂直间距

间距比例

Tailwind CSS v4.3 使用可配置的间距比例，其中 --spacing 是基础单位（默认值：0.25rem/4px）。自 v4.3.1 起，*-0 会输出 0，*-1 会输出 var(--spacing)，而不再使用 calc()。

类	值
0	0
px	1px
0.5	calc(var(--spacing) * 0.5) = 0.125rem
1	var(--spacing) = 0.25rem
2	calc(var(--spacing) * 2) = 0.5rem
3	calc(var(--spacing) * 3) = 0.75rem
4	calc(var(--spacing) * 4) = 1rem
6	calc(var(--spacing) * 6) = 1.5rem
8	calc(var(--spacing) * 8) = 2rem
12	calc(var(--spacing) * 12) = 3rem
16	calc(var(--spacing) * 16) = 4rem

常见模式

居中容器

<div class="mx-auto">Centered content</div>

带内边距的卡片

<div class="p-6 bg-white rounded-lg shadow">Card content</div>

带间距的 Flex 项目

<div class="flex space-x-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

带垂直间距的堆叠布局

<div class="space-y-4">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

查看详细参考：

• 外边距工具 →
• 内边距工具 →