css变量可动态修改padding/margin，需以--开头、设默认值如var(--space-md, 12px)，响应式通过@media更新变量值，注意margin塌陷、命名规范及单位一致性。
怎么用CSS变量动态改padding和margin
直接在根元素或组件上定义--space-sm、--space-md这类自定义属性，然后在padding或margin里用var(--space-md)引用。浏览器会实时响应变量值变化，不用JS重写样式。
常见错误是漏写默认值：var(--space-md, 12px)比var(--space-md)更安全——变量未定义时不会让整个声明失效。
- 变量必须用
--开头，比如--gap合法，gap不合法 - 不能在
@media外直接用calc(var(--space) * 2)，得写成calc(var(--space) * 2)（支持），但calc(var(--space) + 1rem)要确保单位一致 - 修改变量推荐用
document.documentElement.style.setProperty('--space-md', '16px')，别直接操作style.cssText，容易覆盖其他变量
响应式场景下怎么让padding随屏幕变
不是靠媒体查询反复写padding，而是把断点逻辑交给CSS变量：在@media里只改变量值，样式规则复用。
比如移动端需要紧凑些，桌面端留白多些——变量就是“开关”，样式是“电路”，改开关比重铺电路快得多。
- 在
:root设默认值：--pad-base: 8px - 在
@media (min-width: 768px)里改：:root { --pad-base: 16px; } - 元素统一用
padding: var(--pad-base)，无需重复写媒体查询块 - 注意：Safari 15.4之前不支持在
@media里动态更新:root变量，老版本得用html[data-theme="desktop"]这类class切换兜底
margin用变量后为啥兄弟元素没对齐
因为margin塌陷（collapsing margins）不会因变量而消失。变量只是替换了数值，塌陷照常发生——这是CSS渲染机制，跟是不是变量无关。
典型现象：两个块级元素都设了margin-bottom: var(--space)，结果间距不是2 * --space，而是单个--space。
- 解决优先级：用
padding代替margin（父容器加padding，子元素不设margin） - 或者用
display: flow-root触发BFC，阻止塌陷 - 避免在flex/grid容器里滥用
margin变量控制间距，改用gap更可靠 - 如果非要用
margin，记得在开发者工具里检查computed值，确认塌陷是否发生，别误以为变量没生效
变量名怎么起才不容易冲突和混淆
别用--padding这种泛称，它既没说明层级也没说明方向。项目一复杂，不同组件的--padding就打架。
命名核心是“作用域+意图+单位”，比如--card-padding-y比--pad-y明确，--btn-margin-inline-end比--margin-right更能适配RTL。
- 推荐前缀分组：
--layout-（全局间距）、--component-（组件内）、--theme-（主题色/尺寸） - 方向用语义词：
-inline-start代替-left，兼容RTL布局 - 避免纯数字命名：
--space-4不如--space-xs可读，除非团队已约定数字映射表 - 变量值尽量带单位：
--space-md: 1rem，别写--space-md: 16，否则var(--space-md) * 2会出错
最麻烦的其实是变量层级嵌套——比如--card-padding: calc(var(--layout-gap) * 1.5)，一旦--layout-gap没定义，整条计算链就断。上线前务必在无JS环境下测一遍变量 fallback 是否兜得住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
