不能直接用padding: var(--padding)进行方向控制，因ie不支持多值var()、旧版safari嵌套calc不稳定，且单变量无法局部覆盖；应拆分为--padding-top等四个独立变量分别控制。
直接用 padding 简写属性配合 CSS 变量是可行的，但必须拆分使用——padding 本身不支持多值变量（如 var(--padding-top) var(--padding-right)），也不能在 IE 和旧版 Safari 中可靠运行。
为什么不能直接 padding: var(--padding) 用于方向控制
很多人想用一个变量统一管理所有方向，比如 :root { --padding: 1rem 0.75rem; }，再写 padding: var(--padding);。这在 Chrome/Firefox 中看似能跑，但实际踩了三个坑：
- IE 完全不支持多值
var()，解析失败后会回退到浏览器默认值（通常是 0） - 旧版 Safari（≤15.6）对
calc(var(--x) + 1px)嵌套支持不稳定，而复合写法本质是“多值” - 一旦某方向需独立响应（比如深色模式只缩上边距），单变量无法局部覆盖，只能重写整条
padding
正确的复合属性拆分方式：用四个独立变量
把 padding 拆成 --padding-top、--padding-right、--padding-bottom、--padding-left，再分别注入对应单边属性。这是唯一兼容性稳妥、可维护性强的方案：
- 每个变量只管一个方向，媒体查询或 JS 修改时互不干扰
- 声明位置灵活：
:root设全局默认，.card.dark里重定义--padding-top即可生效 - 单位必须显式携带：
--padding-top: 0.5rem;，不能写--padding-top: 0.5; - 避免混用简写和单边：如果用了
padding-top: var(--padding-top)，就别在同一选择器里再写padding: 1rem;，后者会覆盖前者
JS 动态改内边距时，别碰 style.padding
直接操作 element.style.padding = '0.75rem' 会抹掉你用 CSS 变量做的所有响应逻辑。正确做法是只改变量：
- 改单个元素：
element.style.setProperty('--padding-bottom', '0.25rem'); - 批量改卡片组：优先改父容器，比如
document.body.style.setProperty('--padding-top', '1rem');，子元素靠继承生效 - 滚动中动态调整：务必用
requestAnimationFrame节流，否则频繁 setProperty 会导致 layout thrashing - 注意挂载时机：确保元素已插入 DOM 再调用
setProperty，否则无效
媒体查询里变量重定义的顺序陷阱
变量不是“就近覆盖”，而是按 CSS 层叠规则计算。常见错误是这样写：
body { --padding: 1rem; }
@media (max-width: 768px) {
:root { --padding: 0.75rem; } /* ❌ 这里 :root 不匹配 body，变量未生效 */
}
应统一作用域：
- 所有媒体查询内的变量重定义，都写在
:root下，例如：@media (max-width: 768px) { :root { --padding-top: 0.5rem; } } - 避免在不同选择器里重复定义同一变量名，否则调试时难以追踪来源
- 移动端和 PC 端的差值建议控制在 0.5rem 以内，否则视觉跳跃明显
真正难的不是写对语法，而是记住：CSS 变量没有“继承链”，只有“作用域链”；padding 的复合写法在变量场景下必须让步于可预测性——拆开，才是最省事的控制方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
