html本身无间距系统，所有间距由css控制；应建立基于css自定义属性的spacing token、优先使用gap管理子项间隙、全局设置box-sizing: border-box，三者结合构成可复用、可预测、易维护的间距系统。
直接说结论：HTML 本身没有“间距系统”，所有间距都靠 CSS 控制；真正要设计的，是 CSS 层面的一套可复用、可预测、易维护的 spacing 规则。
为什么不能只写 margin: 12px 或 padding: 8px 就完事
零散写具体像素值会导致样式失控：同一类按钮在不同页面里上下间距不一致；卡片列表换到新模块后 gap 突然变大；响应式断点一加，所有 margin-bottom: 24px 全得手动改。
- 浏览器默认样式（比如
p的margin-top和margin-bottom）会干扰你的预期，尤其在未重置时 -
margin在块级元素间会发生外边距合并（collapsing），两个margin-bottom: 16px相邻，实际只生效 16px，不是 32px - 硬编码数值无法响应缩放、字体大小变化或深色模式等环境变量
- 团队协作时，没人知道
12px是“小间距”还是“中等间距”，语义缺失
用 CSS 自定义属性建立 spacing token
把常见间距抽象成带语义的变量，而不是到处写数字。例如：
:root {
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
}
这样写就具备可读性和可维护性：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
margin-bottom: var(--space-md);比margin-bottom: 16px;更容易理解用途 - 全局调整只需改
:root里的值，所有引用自动更新 - 配合媒体查询可做响应式覆盖：
@media (min-width: 768px) { :root { --space-md: 20px; } } - 避免使用
em或rem做 spacing token —— 它们依赖字体大小，而间距应独立于文字缩放逻辑
优先用 gap 而非 margin 管理子项间隙
当多个元素处于同一容器内（如导航栏菜单项、卡片列表、表单字段组），gap 是更干净的选择：
-
display: flex; gap: var(--space-md);或display: grid; gap: var(--space-lg);可一次性控制所有子项之间空隙 -
gap不受外边距合并影响，行为确定；也不需要给首尾子项额外加margin来“抵消”多余空白 - 不支持 IE11，但若项目已放弃 IE，
gap应作为默认方案 - 慎用
gap替代段落间距：对p列表用gap需包裹在div中并设display: flex; flex-direction: column;，此时要注意语义是否合理（div包裹多个p是常见且合规的）
别忽略 box-sizing: border-box 对 spacing 的隐性影响
默认的 content-box 模式下，width: 300px; padding: 16px; 实际总宽是 332px —— 这会让基于固定宽度布局的间距计算全部失效。
- 全局声明
* { box-sizing: border-box; }是现代项目的事实标准，必须加 - 加了之后，
padding不再“撑开”元素，你设置的width就是真的总宽度，spacing 才可控 - 特别注意表单控件（
input,textarea）和按钮，它们常因默认box-sizing不一致导致横向对不齐 - 如果某处必须保留
content-box（极少见），请显式重写，不要依赖浏览器默认
真正难的不是写出一个 margin，而是让所有间距在组件复用、主题切换、多端适配时仍保持一致。token + gap + border-box 这三样东西搭起来，才算是个能落地的 spacing 系统。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
