间距

Spacing

也常被叫作：留白空白间距系统元素之间的空隙

风格与视觉通常止于「主路径」约 1 分钟读完

你可能会这么说

「页面上两个东西之间留多少空隙，太挤看着难受，太空又显得散。」

间距 Spacing

控制元素之间空隙的大小，让页面有节奏、不拥挤、能分清主次。

间距解决的是「元素之间的距离」。两个按钮挨着和隔开 16 像素，传达的是完全不同的关系：挨着像是一组动作，隔远一点像是两件不同的事。间距是界面里最便宜的层级工具——不需要加颜色、加边框，拉开距离就能告诉用户「这两块内容不是一回事」。

好的间距不是每个地方随便挑一个数字，而是用一套固定的步进。常见做法是 4 的倍数：4、8、12、16、24、32、48。这样整个页面只有那么几个可能的空隙值，看起来才统一。如果每个地方都是随机数字——7、13、22——页面就会显得「哪里都没错，但就是乱」。这个统一感用户说不出来，但能感觉到。

间距真正的价值在于分组。内容靠得近=一个组，组和组之间留大空隙=换一个部分。你该留给 AI 的，不是「每个边距都是多少」，而是「哪些内容是一组、组之间拉开多少」，让间距自己去承担分组的任务。

长什么样真实可交互，不是截图

分组清晰

标题↓正文↓按钮

挤成一团

标题↓正文↓按钮

左：标题、正文、按钮之间有明确的层次空隙，像一组有节奏的内容。右：所有空隙都小于 8px，读者分不清哪里是标题哪里是按钮。同一段内容，只是间距不同，观感完全不同。

拆开看，里面有这几块

1
外部间距 Margin
元素和它外面东西的距离，用来拉开不同组。控制的是「这个元素跟邻居隔多远」。
2
内部间距 Padding
元素边框和里面内容的距离，用来让内容不贴边。一个按钮的「高度」很多时候就是 padding 撑出来的。
3
步进 Scale
整个页面共用的那一组空隙值（通常是 4 的倍数）。没有它，间距就是一堆随机数字。

常见的有哪几种

紧凑间距Compact

空隙普遍偏小，单位面积能放下更多内容。

用在：表格、数据密集的后台、工具面板

宽松间距Spacious

空隙大，内容少而透气。

用在：营销页、落地页、需要显得高级的页面

容易搞混？这样区分

间距 ≠ 边框 Border

间距是元素之间的距离（空隙），圆角是元素边角的弧度（形状）。间距解决「排布乱不乱」，圆角解决「看起来尖不尖」。间距不会让元素本身变样，只是挪它的位置。

看边框

间距 ≠ 内边距 Padding vs Margin

两个都很容易在给 AI 下单时被混用。内边距（padding）是元素自己内部的留白，让内容不贴边；外边距（margin）是元素和外部邻居的距离。说反了，按钮会看起来不一样。

什么时候用得上

按钮高度

一个按钮看着太矮点不准，很多情况下不是要加 height，而是加内边距把点击区域撑大。

表单分组

字段和字段之间留小空隙（同一组），每组字段之间留大空隙（换一组），读起来才不累。

列表与卡片

卡片之间统一用一个固定的空隙值，整排才不会忽近忽远。

你可以这样跟 AI 说

直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。

【任务】把 [页面] 的间距统一成一套 [4 的倍数] 的步进，不要再出现 7、13、22 这种随机数字
【目标】
  - 先告诉我你打算把哪些间距值归并成哪几个标准值，让我确认，再动手
  - 标题和正文之间的空隙 > 正文内部的换行空隙
  - 按钮的外边距至少 8px，内边距至少让可点击高度不低于 44px
【边界】不要改颜色、字号、边框；不要改任何位置上的内容本身；不改动布局结构
【分组要求】把「是同一组」的内容用小空隙（8 或 12），把「换了一组」的内容用大空隙（24 或 32），并注明你判断的分组
【交付】列出你改了哪些文件、每处从什么值改成什么值；我在浏览器哪个地址滚动哪一块能看到区别；你没验证的部分单独说明

关键是把「统一成一套步进」写成硬要求，并让它先报归并方案给你确认——这样它不会随手敲数字，也不会自作主张改颜色字号。

它说「做好了」，你怎么自己验

这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「主路径」这层：真实用户的正常操作能走通，不靠特殊参数。

要亲眼看到这些，才算数

随便找一排对齐的元素，量一下它们的间距，数值应该都落在你定的那套步进里（比如 4 的倍数），而不是 7、13、22。
标题和正文之间的空隙明显大于正文每行之间的空隙，读起来有「标题是标题」的感觉。
按钮的可点击高度在手机尺寸下不低于 44px，不是靠 height 硬撑，是靠内边距。
把「换了一组」的内容（比如卡片之间）和「同一组」的内容（比如卡片内的字段）对比：组间距比组内间距大。
缩放浏览器到不同宽度，间距不会在某一个宽度突然变得忽远忽近。

它常这么糊弄你

「间距已统一」——但随手量的三个数值是 8、16、24 之外的随机数，只是看着整齐。逐处量。
只改了外边距，没动内边距，按钮点击区域还是小得点不准。
为了「间距统一」把所有空隙都压成同一个值，结果分组感消失，什么都挨在一起。
把间距调宽说成「更高级」，实际只是把内容堆得越来越散。间距的目的是分组，不是加空白。

间距这类纯视觉任务最高能验到「主路径」层：你在真实浏览器里用肉眼和量尺寸工具（浏览器开发工具）看一遍就够了。开发者工具里选中元素能看到 margin/padding 的真实像素值，不用问 AI，自己就能量。

考考你选一个你觉得对的

为什么「全站间距都用 4 的倍数」比「每个地方间距合理就行」更好？

想再深挖一点靠谱出处

8-point Grid（8 点网格）Specify ↗Spacing（间距设计）Material Design ↗

# 间距 (Spacing)

> 控制元素之间空隙的大小，让页面有节奏、不拥挤、能分清主次。

**你可能会这么说**：页面上两个东西之间留多少空隙，太挤看着难受，太空又显得散。

间距解决的是「元素之间的距离」。两个按钮挨着和隔开 16 像素，传达的是完全不同的关系：挨着像是一组动作，隔远一点像是两件不同的事。间距是界面里最便宜的层级工具——不需要加颜色、加边框，拉开距离就能告诉用户「这两块内容不是一回事」。 好的间距不是每个地方随便挑一个数字，而是用一套固定的步进。常见做法是 4 的倍数：4、8、12、16、24、32、48。这样整个页面只有那么几个可能的空隙值，看起来才统一。如果每个地方都是随机数字——7、13、22——页面就会显得「哪里都没错，但就是乱」。这个统一感用户说不出来，但能感觉到。 间距真正的价值在于分组。内容靠得近=一个组，组和组之间留大空隙=换一个部分。你该留给 AI 的，不是「每个边距都是多少」，而是「哪些内容是一组、组之间拉开多少」，让间距自己去承担分组的任务。

**也叫**：留白、空白、间距系统、元素之间的空隙

## 你可以这样告诉 AI

```text
【任务】把 [页面] 的间距统一成一套 [4 的倍数] 的步进，不要再出现 7、13、22 这种随机数字
【目标】
  - 先告诉我你打算把哪些间距值归并成哪几个标准值，让我确认，再动手
  - 标题和正文之间的空隙 > 正文内部的换行空隙
  - 按钮的外边距至少 8px，内边距至少让可点击高度不低于 44px
【边界】不要改颜色、字号、边框；不要改任何位置上的内容本身；不改动布局结构
【分组要求】把「是同一组」的内容用小空隙（8 或 12），把「换了一组」的内容用大空隙（24 或 32），并注明你判断的分组
【交付】列出你改了哪些文件、每处从什么值改成什么值；我在浏览器哪个地址滚动哪一块能看到区别；你没验证的部分单独说明
```

## 怎么验证他真的做到了

通常止于层级：**主路径** — 真实用户的正常操作能走通，不靠特殊参数

- [ ] 随便找一排对齐的元素，量一下它们的间距，数值应该都落在你定的那套步进里（比如 4 的倍数），而不是 7、13、22。
- [ ] 标题和正文之间的空隙明显大于正文每行之间的空隙，读起来有「标题是标题」的感觉。
- [ ] 按钮的可点击高度在手机尺寸下不低于 44px，不是靠 height 硬撑，是靠内边距。
- [ ] 把「换了一组」的内容（比如卡片之间）和「同一组」的内容（比如卡片内的字段）对比：组间距比组内间距大。
- [ ] 缩放浏览器到不同宽度，间距不会在某一个宽度突然变得忽远忽近。

常见糊弄：
- 「间距已统一」——但随手量的三个数值是 8、16、24 之外的随机数，只是看着整齐。逐处量。
- 只改了外边距，没动内边距，按钮点击区域还是小得点不准。
- 为了「间距统一」把所有空隙都压成同一个值，结果分组感消失，什么都挨在一起。
- 把间距调宽说成「更高级」，实际只是把内容堆得越来越散。间距的目的是分组，不是加空白。

来源：https://mickerbook.com/reference/t/spacing/