# 留白该留多少：边距按短边定，间距只留五档

外圈边距与内部间距分开定：短边 6%–8% 定边距，正文字号做单位定五档，再按“先组间后组内”贴上去，最后查“空得慌”是哪种毛病

> 排版 · 版面设计 · 留白与间距 · 约 6 分钟 · 10 月 25 日

## 本篇要点

1. 留白要按两种用途分别确定：外圈边距决定“有没有边”，由画布尺寸定、一张物料定一次；内部间距决定“哪些是一组”，随内容变。混在一起调，就会越调越别扭。
2. 边距取画布短边的 6%–8%：A4 短边的这个区间正好对上印厂常见的 10mm 安全边距，大幅海报的 15–20mm 也在其中。
3. 间距以正文字号为单位定五档（0.5u、1u、1.5u、2.5u、4u），因为行距本来就跟着字号走，间距用同样的倍数才能和文字保持同一种节奏。
4. 档位要少而疏：相邻两档之间必须一眼看得出差别，太密的档位等于没有档位。
5. 贴档位时先定组间再定组内：组内 1u、组间 2.5u、大区块 4u，真正起作用的是倍数差（2 倍以上，常用 3–4 倍），不是某个绝对数值。
6. “空得慌”多是三种毛病之一：内容缩在中间、间距没有档位、留白与内容视觉重量不匹配；对应的修法分别是放大内容、拉开组间、调整内容或画布，而不是往里填东西。

---

做版面做到后半程，常有两种感觉。一种是东西都放好了，看着还行，但空得发慌；另一种是怎么挪，内容都缩在中间，四周一圈白。这两种情况其实是同一个问题的两端：留白没有被当成结构来用，只当成“剩下的地方”。

这篇按操作顺序走一遍：先分清两种留白，给边距定一个数，给元素间距定五档，按“先组间、后组内”的顺序贴上去，最后用一套顺序查“空得慌”到底是哪种毛病。

开始前准备三样东西：一张正在做的物料（下面的数字按 1080×1350 的竖版方图算，正文 32px，换成 A4 或横图时按同样的方法换算）；能显示标尺、参考线或坐标的软件；一个记事本，把定下来的几个数记下来——这套数就是你后面所有物料的底子。

## 第一步：先分清两种留白

一张图上的空白只有两类，作用完全不同。

**外圈**：内容区到画布边缘那一圈，也就是边距。它决定这张图拿在手里有没有“边”，看起来是完整的还是被裁过的。

**内部**：元素和元素之间的空隙。它决定哪些东西是一组、哪些是两回事。

两者的定法不一样：外圈由画布尺寸定，一张物料定一次，从头到尾不改；内部由内容的分组关系定，内容变了才动。很多人改图时觉得“松一点”更好，就把所有距离均匀放大，结果组内的字散开了，组间反而没分开。分开这两类，才谈得上调。

## 第二步：边距按短边比例定

先量画布的短边。1080×1350 的短边是 1080。

边距取短边的 6%–8%，大约 65–85px。取 80px 定下来。

为什么用比例而不是某个固定像素：边距的作用是“框”，框的粗细得跟着画布走。定一个固定值，换到大画布上框就显细，换到小图又显堵。

印刷时方法一样，只是换成毫米。A4 短边 210mm 的 5%–8% 是 10.5–17mm，和印厂常见的 A4 安全边距 10mm、A2 以上海报建议的 15–20mm 对得上[4]。

这是起点，不是标准值。四个边可以不完全相等——底边略宽、重心稍高，是常见做法——但差值要落在你的档位里，别随手差个十像素。

## 第三步：间距用正文字号做单位，只留五档

内部间距不要一处处拖，先定一个单位：

$$u=\text{正文字号}=32\text{px}$$

再从 u 推出全部间距，取五档：0.5u（16）、1u（32）、1.5u（48）、2.5u（80）、4u（128）。

**为什么用正文字号做单位。** 正文的行距本来就跟着字号走（一般在一倍半上下），所以一个 u 大致等于“半行多一点”。间距用 u 的倍数，视觉上就和文字同一套节奏——这正是“重复”那篇说的间距档位：固定几个数，不要每次现调。

**为什么只要五档。** 档位必须一眼能分辨才有意义。在 8px 网格上，12 和 16 的差别经常看不出来[1]；档位太密等于没有档位，反而更乱。常见做法是让档位在两端这样分布：小值密集、大值稀疏。Atlassian 的间距系统就把刻度分成小（0–8）、中（12–24）、大（32–80）三组，同一个道理[2]。

![间距刻度不是均匀排列的：小值密集以便微调，大值之间拉开，读者才分得出“这一档”和“那一档”](https://atlassian.design/assets/6004a3256691/569853ee87243da57a3a588ac6094f7b/spacing-scale.png)

印刷物料把 u 换成毫米或磅，倍数不变，这套档位可以直接搬。

## 第四步：先放组间，再放组内

顺序跟直觉相反：先定“分开”的距离，再定“靠拢”的距离。

- **同一组内**（标题和它的副标题、日期和地点、价格和单位）：1u
- **不同组之间**（标题组和正文组）：2.5u
- **大区块之间**（标题区、图片、报名信息）：4u
- **四周边距**：2.5u，正好 80，跟第二步算出来的撞上了，说明这套比例自洽

先放组间，是因为分组靠的是“隔得够远”，不是“靠得够近”。组内再紧，如果组间没拉开，眼睛还是读不出结构。

这里真正起作用的是比值，不是绝对值。组内 8、组间 32 成立，因为差了 4 倍；组内 16、组间 20 不成立，眼睛看不出差别，读成“都挺均匀”。有个常被引用的经验说法：组间至少是组内的 2 倍，常用 3–4 倍，低于 2 倍时分组会变得含糊[3]。这是经验比例，不是定律，但“一倍附近是危险区”值得记住——那种图上每处间距都差不多，看着规规矩矩，实际没有分组。这跟对齐那篇里“排齐了还是别扭”是同一类失误：工具上没错，眼睛那边没成立。

## 第五步：查“空得慌”是哪种毛病

三种成因，按顺序查：

**一、边距没成比例：内容缩在中间。** 把画布缩到拇指大，看内容占了多少。竖版方图里内容通常该占到七成上下；只剩一半、四周空一大圈、中间挤成一团，是内容太小，不是留白太多。修法是把内容放大到接近边距，而不是往里加东西填满。

**二、间距没有档位：哪儿都差不多。** 所有距离都是 20–30px，空白均匀摊在每一处，看起来像没画完。修法是把组内压回 1u、组间拉到 2.5u——留白立刻从“剩余”变成“分组”。

**三、留白和内容的视觉重量不匹配。** 小字、细线、浅色压在大留白里会像草稿；粗标题、一块实色、一张大图，同样的留白就变稳。所以“高级感”不是留白多给的，是留白和内容重量一起给的。内容确实很少、字也小，宁可缩小画布、或把内容收在一条对齐线上，也别让它孤零零飘在正中。

反过来看，一张图算“空得舒服”只需三条：边距占短边的比例对；组内组间有明确的倍数差；内容有一条被坚持着的对齐线，留白是这条线延伸出去的结果，而不是谁也没管的空白。

## 收尾

对着自己的图回答三个问题：

1. 边距占短边多少？落在 6%–8% 里，还是明显更小？
2. 全图一共用了几个间距数？超过五档就合并。
3. 最小间距和最大间距差几倍？不到 2 倍，分组没成立。

最后一个动作：把图缩到手机屏幕的宽度看一眼。如果它变成清清楚楚的几团，留白就到位了；如果糊成一片，问题多半不在空多少，而在档位没拉开。

行距、段距、标题和正文之间那点距离，是留白里更细的一层，下一篇单独处理。

## 思维导图

```mermaid
flowchart LR
  A["留白该留多少"] --> B["两种留白"]
  B --> B1["外圈边距：定有没有边，一张定一次"]
  B --> B2["内部间距：定哪些是一组，随内容变"]
  A --> C["定边距"]
  C --> C1["短边的 6%–8%"]
  C --> C2["对上印厂 10mm / 15–20mm 安全边距"]
  A --> D["定档位"]
  D --> D1["单位 u = 正文字号"]
  D --> D2["五档：0.5u / 1u / 1.5u / 2.5u / 4u"]
  D --> D3["档位要疏，太密等于没有"]
  D --> E["先组间后组内"]
  E --> E1["组内 1u，组间 2.5u，大区块 4u"]
  E --> E2["靠倍数差分组，2 倍以上"]
  A --> F["空得慌的三种成因"]
  F --> F1["内容缩在中间 → 放大内容"]
  F --> F2["间距没档位 → 拉开组间"]
  F --> F3["留白与重量不匹配 → 调整内容或画布"]
```

## 术语表

- 外圈与内部留白：外圈是内容区到画布边缘的边距，定一次就不动；内部是元素之间的空隙，随分组关系变化，两者定法不同。
- 间距档位：预先定好的一小组间距数值，全图只用这几个，而不是每处现调。
- 单位 u：以正文字号作为间距的计算单位，所有档位都是它的倍数，换尺寸或换单位（px、mm、pt）时倍数不变。
- 组内与组间：同一信息块内部的间距（小）和不同信息块之间的间距（大），两者的倍数差决定读者能不能看出分组。

## 来源

1. [Spacing, grids, and layouts — 讨论 4/5/6/8/10pt 基准单位的取舍，指出基准单位过小会让 12pt 与 16pt 的差别难以分辨](https://www.designsystems.com/space-grids-and-layouts/)
2. [Atlassian Design: Spacing — 8px 基础单位，刻度分小（0–8）、中（12–24）、大（32–80）三组](https://atlassian.design/foundations/spacing/)
3. [Law of Proximity — 组间约为组内 3–4 倍时分组最可靠、低于 2 倍会含糊的经验总结](https://deplaybook.com/pages/strategies/law-of-proximity)
4. [Lava Print: Artwork Specifications — A4 安全边距 10mm、A2–A0 海报建议 15–20mm](https://lavaprint.com.au/artwork-specifications-for-print/)

---

原文：https://pangzhengboyin.com/articles/how-much-whitespace-margin-and-spacing-scale-dd54c14a

> **庞征博引** · 想学的，慢慢都会
>
> 庞征博引是把想学的东西写成连载的 AI 学习工具：每篇 5–10 分钟，边读边问，接下来学什么跟着你走。这篇就是这样写出来的。
>
> 开始你自己的连载 → https://pangzhengboyin.com