space

空间

空间是成本最低的材料，却也是生成式界面最浪费的东西。经验丰富的人第一眼就能看出间距不均，而这也是模型最后才会修正的问题。

间距刻度

所有内容都遵循 4px 网格。常用的间距值：

2 · 4 · 6 · 8 · 10 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 96

只从这个列表中选择数值，不要使用中间值。如果 14px「看起来合适」，那就是相邻元素有问题；修正它们，12 或 16 就会看起来合适。

相关内容之间的距离应小于不相关内容之间的距离。标签到对应输入框：6。表单中的两个输入框：16。表单中的两个区块：32。各级间距之间的比例，能让结构清晰可见，无需分隔线。

密度

按界面区域决定密度，而非按组件决定：

界面区域	行高	内边距	分组间距
紧凑列表 / 表格（工具、管理界面）	28–32px	水平方向 8–10px	24px
宽松列表（设置、信息流）	40–48px	12–16px	32px
阅读内容	—	0，由行宽控制	40–64px
营销页面	—	24–40px	96px 以上

紧凑型工具采用 48px 行高，会显得像玩具。设置页面采用 28px 行高，则会像电子表格。应根据用户查看每项内容的时长来匹配密度。

宽度

• 应用框架：最大宽度 1120–1280px，居中，并通过可见边缘（边框或背景变化）让框架在页面上呈现为一个独立对象。
• 阅读行宽：55–70ch，应用于文本块。
• 侧边栏：240–280px。更窄会导致标签截断；更宽则会挤压内容列。
• 表单：400–520px。在 1400px 宽的屏幕上使用全宽文本输入框是个错误。
• 对话框：400px（确认）、520px（表单）、720px（内容）。桌面端绝不要使用全宽对话框。

用 gap，而非 margin

同级元素之间的间距由父级负责。在 flex 和 grid 布局中使用 gap；子元素不设置外边距。这样可以避免「最后一个子元素多出外边距」和「第一个子元素位置过高」这类问题，也意味着组件可以放到任何地方，而不会连同间距一起带过去。

外边距只用于一种情况：在连续文本中分隔区块与后续内容（例如文章段落上的 margin-bottom）。

对齐

• 文本与文本对齐：标题、描述和下方各行的左边缘应处于同一条 x 坐标线上。图标应位于这条线之外，而不是线上。
• 同一行的图标和文本，应以图标的视觉中心对齐；它通常比几何中心高 1px。使用 translateY(-0.5px) 或 margin-top: -1px 微调，不要通过给文本添加内边距来调整。
• 数字在列中右对齐，文本左对齐；要比较的内容绝不要按列居中。
• 同一行的按钮应共享基线和高度。主按钮和次按钮的高度绝不能不同。
• 视觉对齐优先于几何对齐：播放图标稍微偏右时看起来才居中；圆角胶囊中的文本稍微偏左时看起来才居中。

节奏

各区块之间的垂直间距，应随间隔层级增大：

• 区块内的行：0（行本身形成间距）或 2–4px
• 区块标题到其中各行：8–12px
• 区块之间：24–32px
• 页面标题到第一个区块：28–40px

节奏一致，长页面才会让人感到平静。变化应体现在内容上，而不是间距上。

响应式设计

先采用流式布局，再添加断点：

1. 先让内容自然换行并使网格折叠（repeat(auto-fill, minmax(280px, 1fr))），再添加媒体查询。
2. 断点最多两到三个，并根据实际布局失效的位置设置：侧边栏折叠（约 1024px），列堆叠（约 640px）。不要因为框架提供了「sm/md/lg/xl/2xl」就照搬使用。
3. 对于会放入不同宽度区域的组件，使用容器查询。卡片不应该感知视口。
4. 屏幕边缘留白：手机上 16px，桌面端 20–28px。绝不要设为 0。
5. 除了专为横向滚动设计的内容（轮播、带有 overflow-x: auto 的代码块），其他内容都不应横向滚动。

在 375px、768px、1024px 和 1440px 宽度下进行测试。然后在这些宽度之间缓慢调整大小，观察是否出现跳动。

粘性与固定定位

• 粘性页眉高 44–52px，半透明（background: color-mix(...) 不透明度为 80% + backdrop-filter: blur），并带有底部边框。下方内容使用与其高度匹配的 scroll-margin-top，确保锚点定位后显示在页眉下方。
• 粘性侧边栏使用 position: sticky; top: 0; height: 100dvh，并设有独立的滚动区域来处理溢出，使用 overscroll-behavior: contain。
• 手机上的固定底栏应位于主屏幕指示条上方：padding-bottom: env(safe-area-inset-bottom)。
• 手机上，阅读内容顶部不得有固定元素，除非该元素是高度低于 56px 的栏。

滚动容器

• 明确设置内部滚动区域（在 flex 子项上设 min-height: 0，并设 overflow-y: auto），边缘清晰可见，并设置 overscroll-behavior: contain。
• 任一滚动区域中，每次只能沿一个轴滚动。
• 不明显可滚动的区域需要提供提示：在底部边缘添加渐隐效果，或让内容在边界处明显被截断。

将留白作为工具

一个只有一个表单、周围留有大量空间的页面，会显得专注。同样的表单如果紧挨着侧边栏和页眉，就会显得杂乱。添加卡片边框来分组内容前，不妨先尝试增大组外留白、缩小组内间距。

如果某个区域显得空荡，而且不对劲，问题通常出在宽度，而不是留白：内容比所在区域窄。限制区域宽度，而不是填满它。

卡片网格

使用 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))，并设置 gap: 8–16px。同一行中的卡片高度一致（align-items: stretch），内部内容顶部对齐，操作项通过 margin-top: auto 推到底部。带有操作项的内容绝不要使用瀑布流布局。

未经斟酌的留白迹象

迹象	修正方法
使用 13px、18px、22px、30px 这类数值	对齐间距比例
所有元素之间都是 16px 间距	建立层级：内部 8，元素间 16，组间 32
在组件上设置外边距	在父级使用 gap
用卡片边框将三项内容分组	在它们周围留白
桌面端使用全宽输入框	400–520px
设置五个断点	只在布局确实需要变化的地方设置两个
通过内边距让图标垂直居中	按视觉中心对齐，再微调 1px
内容在断点处跳变	使用流式网格，然后减少断点数量

选自目录

• Ahmad Shadeed — 深入介绍 CSS 布局的文章，并配有交互式图示。
• Every Layout — 将布局原语组合起来使用。
• Utopia — 流式间距与字体比例。
• Refactoring UI — 通过图示阐述间距层级。
• Refero、Mobbin — 查看已发布应用如何设置界面密度。
• 更多内容请访问 stealth.pm/learn。