CSS margin 与 padding 间距系统指南：让页面稳定、不靠感觉对齐

页面看起来“差一点”的时候，很多人会不断微调 margin 和 padding：这里加 3px，那里减 5px。短期看能对齐，长期看会变成不可维护的间距补丁。

真正稳定的页面需要间距系统。本文讲的不是属性语法，而是如何在真实网页制作里用 margin 和 padding 表达结构、节奏和响应式边界。

先给结论：padding 管内部呼吸，margin 管外部关系

最简单的判断：

如果是同一组子元素之间的距离，优先考虑 gap；如果是组件内部呼吸，使用 padding；如果是模块之间关系，才使用 margin。

一、不要让子组件随意决定外部距离

一个常见问题是每个组件都自带上下 margin。当它们组合到不同页面时，间距会叠加、折叠或变得不一致。

更稳定的做法是：组件负责内部 padding，页面或父容器负责外部布局。

.card {
  padding: 24px;
}

.card-list {
  display: grid;
  gap: 20px;
}

这样 card 放到侧栏、列表、弹窗里都更可控。

二、margin 折叠不是 bug，是规则

垂直方向相邻 block 元素的 margin 可能发生折叠。两个段落分别有 margin-bottom: 24px 和 margin-top: 24px，最终距离可能不是 48px，而是取较大值。

这就是为什么很多文章排版会出现“我明明加了间距，但看起来没变化”。

解决策略：

• 文章流可以接受折叠，保持自然节奏
• 组件布局里减少子项 margin，改用父级 gap
• section 间距由页面布局统一控制

三、建立 4 到 8 个间距 token 就够用

不要让项目里出现几十种间距值。常见网页用一组间距 token 已经足够：

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
}

按钮、表单和小组件使用小间距；卡片、模块和 section 使用中大间距。间距少一点，页面会更统一。

四、响应式间距要跟容器走，不要只跟屏幕走

移动端不是简单把所有间距减半。你要看内容密度和容器宽度。

例如：

.section {
  padding: 64px 24px;
}

@media (max-width: 768px) {
  .section {
    padding: 40px 16px;
  }
}

这里纵向节奏和横向留白分别处理。移动端横向空间紧张，左右 padding 通常要明显收窄；纵向 padding 可以保留一定呼吸，避免内容挤成一团。

五、按钮、卡片、表单的间距规则不同

不同组件的间距目标不同：

不要把同一套间距机械套到所有组件上。间距系统是范围，不是死板公式。

六、失败案例：靠 margin 调整首屏，移动端全乱

一个产品页为了让首屏文字“刚好居中”，给标题、按钮、图片都加了不同的 margin。桌面端截图很好看，但移动端图片换行后，按钮距离正文过远，首屏高度失控。

修复方法：

1. 首屏父容器用 Grid 或 Flex 负责整体布局
2. 文案组内部用 gap 控制标题、描述、按钮间距
3. 图片和文案之间用布局容器 gap
4. 移动端只调整容器方向和 gap，不逐个改 margin

这类问题的根因不是 margin 写错，而是用外边距承担了布局系统职责。

七、间距系统 Checklist

• 项目是否有统一 spacing token
• 组件是否只负责内部 padding
• 列表和网格是否优先使用 gap
• section 间距是否由页面统一控制
• 移动端左右留白是否单独调整
• 表单错误提示是否有稳定垂直空间
• 是否减少了随机 3px、7px、11px 这类补丁值

结语

margin 和 padding 决定页面节奏。把 padding 用于内部呼吸，把 margin 用于外部关系，把 gap 用于同组项目，再配合少量间距 token，页面会更稳定，也更容易从模板感走向专业感。

延伸阅读：

• 网页设计布局与视觉层级指南
• 网页设计可读性测试
• CSS display 布局决策指南
• HTML 模板响应式断点策略