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

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

开始前准备三样东西：一张正在做的物料（下面的数字按 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=正文字号=32pxu=\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。

间距刻度不是均匀排列的：小值密集以便微调，大值之间拉开，读者才分得出“这一档”和“那一档”

印刷物料把 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 倍，分组没成立。

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

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