直接写 padding: 16px 会导致内边距失去联动能力，而使用 CSS 变量 --padding 可实现全局响应式控制，但需确保其定义在可继承/覆盖的作用域、带单位、配合 box-sizing: border-box，并避免简写兼容性问题。
为什么直接写 padding: 16px 不如用 --padding 变量
硬编码数值会让所有卡片、按钮、表单控件的内边距失去联动能力。改一个尺寸，就得全局搜索替换；深色模式切换、移动端适配、用户偏好缩放时，根本没法批量响应。而 --padding 是个“开关”，样式规则是“电路”——只动变量值，整套布局节奏就跟着变。
关键不是语法多炫，而是变量是否定义在能被继承/覆盖的作用域里。比如只在 :root 定义却不在 .card.dark 中重设，那深色模式下内边距压根不会变。
-
--padding必须带单位（'1rem'合法，1不合法） - 别用
0.5rem这类易被四舍五入干扰的值，推荐0.75rem/1rem/1.25rem - 组件级变量优先于
:root，比如.modal { --padding: 24px; }比全局更可控
padding: var(--padding) 没生效？三处常见失效点
很多人写了变量却没效果，问题常出在三处：继承失效、box-sizing 冲突、或选择器没命中。
-
padding不继承，所以必须在目标元素上显式写padding: var(--padding)，不能指望父级设了子级自动有 - 务必搭配
box-sizing: border-box，否则--padding: 16px会让元素总宽 =width + 32px，破坏布局预期 - 如果用了简写（如
padding: var(--padding) 0），IE 和部分旧 Safari 会解析失败；要分方向控制，就拆成--padding-top、--padding-bottom
如何用同一套变量同时管住 padding 和 margin
不要为两者各建一套命名空间。统一用 --space-sm、--space-md、--space-lg，让 padding 和 margin 共享语义化间距体系。
立即学习“前端免费学习笔记（深入）”；
- 定义示例：
:root { --space-sm: 8px; --space-md: 16px; --space-lg: 24px; } - 使用示例：
.btn { padding: var(--space-md); margin-bottom: var(--space-lg); } - 避免混用单位：别在同一个项目里同时用
px和rem定义间距变量，否则响应式缩放会错位 - 注意
margin垂直合并：即使用了变量，相邻块级元素的margin-top和margin-bottom仍会取较大值；若需精确控制，统一只设margin-bottom或触发 BFC
JS 动态修改 --padding 和 --margin 的坑点
用 JS 控制间距比操作 style.padding 更干净，但单位缺失、作用域错位、性能卡顿这三点最常导致失败。
- 必须带单位：
element.style.setProperty('--padding', '12px')合法，'12'会导致计算失效 - 批量修改多个卡片时，优先改父容器（如
document.body.style.setProperty('--space-md', '12px')），让子元素通过继承生效，比遍历每个 DOM 节点高效 - 如果间距需随滚动变化，用节流，别在
scroll事件里直接改变量——每帧都触发重排，容易卡顿
真正难的不是写变量，而是确保它在所有需要的地方都被正确继承、覆盖和计算。尤其是当 padding 和 margin 共享同一组变量时，任何一个组件漏掉 box-sizing: border-box 或写错作用域层级，整个间距系统就可能局部失序。
