必须用css变量统一定义间距标尺，如:root{--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px}，配合gap替代margin实现模块间可靠间隔。
用 CSS 变量统一定义基础间距值
硬编码 margin: 12px 或 padding: 8px 到每个组件里，后期改一个数值就得全局搜替换，极易漏改或冲突。必须用 CSS 自定义属性提前约定一套可复用的间距标尺。
推荐在 :root 中定义一组语义化变量：
code:root {
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
}
- 变量名带单位（
px），避免 calc() 时单位缺失报错 - 只定义偶数步进值，适配 1x/2x 屏幕缩放更稳
- 不定义
--space-0，直接用0更清晰 - 表单、卡片、导航等模块可基于这些变量派生子集，如
--form-gap: var(--space-md)
Flex/Grid 容器优先用 gap 而非 margin
在管理后台常见的列表、表单组、按钮组等场景中，子元素数量固定或动态渲染，若对每个子项写 margin-right 或 margin-bottom，不仅冗余，还会因外边距合并（margin collapse）导致首尾间距异常，响应式断点切换时也难维护。
-
gap只作用于直系子元素之间，天然规避 margin 合并 -
gap支持row-gap和column-gap独立控制，比如表格型表单需要纵向紧凑、横向宽松 - 对
display: flex或display: grid的容器生效，IE 不支持 → 若需兼容 IE11，回退到margin+:not(:first-child)选择器 - 示例：
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-lg); }
避免用空格、 或空 <p></p> 控制布局间隔
管理系统常有“快速加个空行”“多打两个空格对齐标签”这类操作，结果是源码混乱、读屏器误读、缩放后错位、无法响应式调整——这不是快捷方式，是技术债源头。
-
- 空
<p></p>会触发浏览器默认margin-top/margin-bottom，该值可能被 reset 规则覆盖，行为不可控 - inline-block 元素间换行产生的约 4px 间隙，本质是父容器
font-size渲染的空白字符，不是设计意图，应通过font-size: 0或改用 flex 解决 - 唯一合法用
100 px）
margin 和 padding 的分工必须明确
管理系统中常见把 padding 当 margin 用：给 <section></section> 加 padding-top 想拉开和上一模块距离，结果背景色或边框跟着外扩，破坏视觉节奏；或者给按钮加 margin 却没处理 vertical-align，导致和文字基线错位。
-
margin：只用于控制「与其他元素之间的距离」，如模块之间、表单项之间、按钮之间 -
padding：只用于控制「内容到自身边框的距离」，如卡片内文字段落离边框、输入框文字离边框、按钮文字离边框 - 所有块级容器（
<header></header>,<main></main>,<aside></aside>）统一设box-sizing: border-box，确保padding不撑大总宽 - 慎用
margin: auto居中 —— 管理系统多为左对齐布局，该写法易在窄屏下意外溢出
gap、确认当前改动属于「外部关系」还是「内部留白」——这需要文档约束，而不是靠代码审查补救。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
