CSS 里的呼吸感：间距系统的三个原则

我做界面有个习惯：先写间距，再写颜色。因为颜色决定第一眼，间距决定能不能读下去。

一、用比例，不用直觉

所有间距都从一个基数长出来，比如 8px。这样你不会写出 13px、27px、35px 这种谁也解释不清的数字。

:root {
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 64px;
}

二、相关的东西挨近，不相关的东西拉开

标题和它的正文是一家人，间距要小；上一段和下一段是邻居，间距中等；换章节了，间距要大。层级不是靠字号喊出来的，是靠距离暗示出来的。

如果所有间距都差不多，读者就得靠读内容来判断结构 —— 这很累。

三、给流动的内容留活口

用 clamp() 让间距跟着视口走，小屏不要把内容挤成一堵墙，大屏也不要让行宽拉到一百多个字符：

.entry {
  --space: 1.15em;
  font-size: clamp(16px, 1.05vw + 12px, 18px);
  line-height: 1.9;
}
.entry > * + * {
  margin-top: var(--space);
}

最后一条经验：写完样式之后，把浏览器缩到 360px 宽，再用最大字号读一遍。如果还舒服，间距大概就成了。

一张对照图

间距对照表

把上面的写法贴进任意主题，正文的呼吸感就出来了。剩下的只是微调。