设定分栏的间距单位时，优先按使用环境来选。网页常用 rem、em、%、ch；设计稿和 App 常用 px；纸质排版常用 mm、pt；响应式场景更推荐 rem 或 ch，让间距跟着字号和阅读宽度一起变化。栏目之间用舒展的间距，栏目内部用紧凑的间距，整页更协调，读者浏览时视线移动也更顺畅。
选择思路
- • 网页排版：用 rem 能随根字号缩放，用 ch 能跟随当前字号宽度，用 % 能跟随容器宽度。
- • 界面设计：用 px 方便标注和交付，数值直观，适合按钮、文字、栅格等元素对齐。
- • 印刷排版：用 mm 或 pt，符合纸张和字体度量，适合分栏、页边距等设置。
单位速查
| 场景 | 常用单位 | 推荐间距示例 |
|---|---|---|
| 网页文章分栏 | rem | 两栏之间留出 1.5rem |
| 移动端设计稿 | px | 正文分栏间距取 16px |
| 桌面端栅格 | px | 栏目模块间距取 20px |
| 印刷分栏 | mm | 正文分栏间距取 4mm |
设置方法
- 1、先定基准字号。网页里可以把基准字号设为 16px。需要栏目间距为 24px 时，用 rem 表示就是 1.5rem。
- 2、再定栏目数量。两栏版式常用较大间距，三栏版式常用稍小间距，这样每栏内容宽度保持均衡。
- 3、最后在代码或设计文件里设置间距。CSS 里可用 column-gap 或 grid gap。Figma、Sketch、Photoshop 里可在布局、栅格、分栏设置中输入数值与单位。
示例代码
.container {
column-count: 2;
column-gap: 1.5rem;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
使用结果
栏目间距用合适单位后，页面会随着字号、屏幕和容器宽度保持协调，栏目边界更清楚，读者阅读时节奏更稳定。
免责声明
本文提供通用排版参考，具体数值以项目设计规范为准。
