界面上的空白常常被当成「还没放东西的地方」。于是每一次评审，都有人指着某块空地建议：这里是不是可以再加一个入口、一条提示、一个入口的提示的入口。最后，页面像一间塞满家具的房间，功能都在，却没有地方落脚。
我更愿意把留白理解为一种结构。它和字重、网格、色彩一样，是被设计出来的秩序。它不负责告诉你还能点什么，而负责让你知道现在该看什么。
留白是结构，不是背景
把一张界面去掉所有文字和图片，只留下边界与块面，你仍然能看出它是否成立。好的布局在「去掉内容」之后依然有清晰的层次：标题拥有更宽的上方间距，正文与注释靠得更近，主要操作和次要操作被分开，页面的边缘守住一条不轻易越过的线。
这意味着一件事：间距不是填充物，而是关系。 两个元素离得近，它们在语义上就被归为一组；离得远，读者就会预期一次停顿。设计师真正要做的是决定这些停顿发生在哪里，以及停多久。
这也是为什么随手给每个模块加 margin-bottom: 24px 很少奏效。统一的数字看起来整齐，却抹平了内容之间的关系。所有东西都一样远，等于所有东西都一样近。
先有网格，再谈边距
网格的价值不是让画面看起来像一张坐标纸，而是让对齐有可预测的落点。我通常从一个十二列的主网格开始，页面外侧留出随视口缩放的沟槽：
.page {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 1.75rem);
padding-inline: clamp(1.25rem, 5vw, 4.5rem);
max-inline-size: 90rem;
margin-inline: auto;
}真正的标题不一定从第一列开始。有时让它在第二列起笔，留出左侧一条窄栏放日期、期号或标签，版面会立刻从「网页」变成「出版物」。那条窄栏不是为了填空：它提供了一个视觉上的起始线，让读者在进入正文之前知道自己身在何处。
有了网格之后，边距才有参照。内容可以在 1 列、4 列、8 列之间移动，但不会随意漂浮。留白因此有了尺度感：空的地方仍然属于结构。
间距需要一套语法
我习惯用一组有限的间距刻度，而不是为每个组件发明新数字：
:root {
--space-1: 0.25rem; /* 8px 以内，微调 */
--space-2: 0.5rem; /* 图标与文字 */
--space-3: 0.75rem; /* 紧邻的信息 */
--space-4: 1rem; /* 段落内部 */
--space-6: 1.5rem; /* 组件内部 */
--space-8: 2rem; /* 组件之间 */
--space-12: 3rem; /* 章节之间 */
--space-16: 4rem; /* 版面转折 */
}这套刻度不需要严格遵循「倍数」，但需要有意图。小数值处理光学微调，大数值负责段落之间的停顿。页面真正好看的秘密，往往不在大留白，而在大留白旁边的那个小间距——它让对比成立。
比如文章标题与导语之间留 1.25rem，导语与元信息之间留 2rem，而文章结束到下一篇推荐之间留 6rem。三种关系，三种距离。读者不用思考，身体会先感受到其中的层级。
让文字自己呼吸
中文排版和拉丁文排版对留白的感受并不相同。汉字是等宽的方块，没有天然的词间空隙；如果行高太紧，整段文字会像一块灰砖。行高超过 1.8 通常是舒服的起点，长文可以到 1.9；标题则要收回来，1.1 到 1.25 才能保持轮廓的完整。
行长同样关键。68ch 是英文阅读的常用范围，在中文语境里，它大约只容得下三十多个汉字。这并不矛盾：行长的目标不是某段代码里的数字，而是让视线在换行时不需要寻找起点。 你可以从 38em 左右开始，再根据字号和字体微调。
还有几个容易被忽略的细节：
- 中文段落不要使用两端对齐，浏览器会在字之间塞入不稳定的空隙。
- 标题的
letter-spacing可以略微收紧，但正文不要动它。 - 段与段之间用间距，而不是首行缩进和空行同时出现。
- 数字、英文与中文之间保持一个细微的视觉间隔，比机械地插入空格更自然。
- 最后一行不要为了「填满」而拆散一个语义单元；现代浏览器里的
text-wrap: pretty能帮上一点忙。
.prose {
max-inline-size: 68ch;
font-size: clamp(1rem, 0.97rem + 0.18vw, 1.125rem);
line-height: 1.9;
}
.prose p {
margin-block: 0 1.5em;
text-wrap: pretty;
}
.prose h2 {
margin-block: 4.5rem 1.5rem;
line-height: 1.2;
letter-spacing: -0.015em;
}注意，这些数值不是奖章。它们只是在提醒你：排版是一组相互制约的关系。字号变大，行长要跟着调整；行高变松，段间距要稍微收紧；内容变复杂，留白的任务就从「好看」变成「导航」。
留白的边界
留白也有失败的方式。
第一种是空洞：间距很大，但关系不明。读者只看到大片空白，却不知道下一步该看哪里。解决方式不是把内容塞回去，而是重新建立对齐与邻近性，让大空白成为有方向的场。
第二种是模仿式的留白：从一张高级感十足的海报里抄来宽边距，却忽略了屏幕上的信息密度和交互任务。纸面上的留白可以被眼睛一次读完，界面上的留白还要承受滚动、点击和不同视口。为屏幕设计留白，意味着为变化预留空间。
第三种是把「少」当成目的。留白不是删除内容，而是让内容找到正确的重量。一个价格、一句说明、一个按钮，它们需要的不是周围没人，而是周围的距离恰好说明它们值多少注意力。
White space is to be regarded as an active element, not a passive background.
— Jan Tschichold
Tschichold 的这句话常被引用，但真正难的并不是承认留白重要，而是在每次改动时继续为它辩护。产品会不断长大，需求会不断叠加；留白是少数需要被主动守护的设计决定。
一块可以呼吸的界面
如果要把这套方法压缩成一张检查清单，我会留下这几条：
- 去掉所有内容后，布局是否还有清晰的边界与层次？
- 每个间距是否能说出它的用途：分组、停顿，还是转折？
- 正文的长度是否让换行变得轻松？
- 中文与西文混排时，标点、数字和字重是否稳定？
- 在最小与最大的视口里，留白是否仍然成立，而不是只在设计稿上成立？
留白最终服务的是注意力。它让界面从「什么都有」退后一步，把位置让给真正重要的那一件事。屏幕不会因为空了一点而失去价值；恰恰相反，当周围安静下来，内容才开始说话。