<p>calc() 解析器对空格是语法级强制要求，+ 和 - 运算符两侧必须有空格，否则表达式被静默丢弃；* 和 / 理论上可无空格但兼容性差，嵌套也不豁免该规则。</p>
calc() 解析器对空格是“语法级”要求，不是风格建议
浏览器 CSS 解析器把 calc() 当作一个需要严格词法分析的表达式，而不是简单字符串拼接。运算符 + 和 - 在 CSS 中本身也是单位（如 +10deg、-webkit-transform）或选择器（如 div + p）的一部分，所以解析器必须靠空格来区分“这里是加法运算符”，而不是“这是正号前缀”或“这是相邻兄弟选择器”。没有空格，100%-20px 会被当作一个未识别的值，直接丢弃，回退到属性默认值（比如 width 变成 auto）。
哪些运算符必须空格？哪些可以省略？
只对 + 和 - 强制要求两侧空格；* 和 / 理论上允许无空格，但实际中：
-
calc(100vw/375*16)在 Chrome 120+ 才开始容忍，旧版 Safari、Firefox 全部拒绝解析 -
calc(100vh - 60px)✅ 安全通用 -
calc(100vh-60px)❌ 几乎所有浏览器视为无效 -
calc((100% - 20px) / 2)✅ 嵌套里也要守规则，括号不豁免空格
常见失效场景：你以为在算，其实根本没生效
很多开发者调了半天发现元素没按预期缩放，最后查 computed style 才发现 width 或 height 显示为 auto 或初始值——这基本就是 calc() 表达式被静默丢弃了。典型诱因包括：
- 复制粘贴时带了中文空格或不可见字符（尤其从文档/聊天窗口粘过来）
- 编辑器自动删了“多余空格”，顺手把
+前后也干掉了 - 用
rem或em时漏写单位，比如calc(100% - 1)（1不是合法长度值） - 在预处理器（如 Sass）里写了
calc(#{$w} - #{$h})，结果变量展开后变成calc(100% -20px)—— 缺了空格
嵌套 calc() 也不能绕过空格规则
有人以为套一层 calc() 就能“兜底”，比如 calc(calc(100% - 20px) / 2)，但嵌套只是让表达式更复杂，并不改变每个子表达式自身的语法约束。里面那层 100% - 20px 依然要空格，否则外层再包十层也没用。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：空格是 calc() 能否进入计算流程的第一道门，跨不过去，后面所有逻辑都不存在。写完记得打开 DevTools 的 Styles 面板，确认该属性值不是划掉的灰色（表示无效），而是正常显示的蓝色（表示已解析生效）。
