CSS3calc宽度计算失败？运算符要加空格！

CSS3 的 calc() 函数中加减号两侧必须严格保留空格，否则整个表达式会被浏览器视为非法值而静默失效——看似正常的 width: calc(100%-20px) 实际会回退到 auto，而正确的写法是 width: calc(100% - 20px)；乘除运算符则无需空格。这一细节在嵌套变量（如 var(--gap)）或预处理器中极易被忽略，且开发者工具不会报错，仅以灰色样式提示，唯有通过 Computed 面板查看实际渲染值才能快速定位问题——空格不是可有可无的格式习惯，而是 CSS 规范强制执行的语法铁律。

calc() 里加减号两侧必须有空格

直接写 width: calc(100%-20px) 会完全失效，浏览器解析时把它当做一个非法值丢弃，最终回退到默认宽度（比如 auto）。这是因为 CSS 规范强制要求 + 和 - 运算符前后**必须各有一个空格**，而 * 和 / 不需要。

• calc(100% - 20px) ✅ 正确（减号两侧有空格）
• calc(100%+20px) ❌ 解析失败（加号无空格）
• calc(100% * 2) ✅ 正确（乘号无需空格）
• calc(100%/2) ✅ 正确（除号无需空格）

嵌套 calc() 或混用变量时容易漏掉空格

当把 var(--gap) 套进 calc() 里做减法，很容易只顾着写变量，忘了运算符空格。比如：

.box { width: calc(100% - var(--gap)); }

这看着很自然，但如果你的 --gap 是 1rem，实际展开就是 calc(100% - 1rem) —— 空格还在，没问题；可一旦你手快写成：

.box { width: calc(100%-var(--gap)); }

那就立刻失效。更隐蔽的是在预处理器（如 Sass）里拼接字符串，空格可能被自动 trim 掉。

浏览器报错不明显，靠 computed 值反推最可靠

calc() 失效时 DevTools 通常**不报红错误**，只是在 Styles 面板里把那行灰掉，Computed 面板中对应属性显示为初始值（比如 width: auto）。这时候别猜，直接看 Computed 标签页里的 width 实际值——如果没按预期计算出来，第一反应就该检查空格。

另外注意：IE11 要求所有单位必须显式写出（0 得写成 0px），不过这个坑现在基本不用踩了。

空格不是风格问题，是语法铁律。少一个空格，整个表达式就废掉，而且毫无提示。

理论要掌握，实操不能落！以上关于《CSS3calc宽度计算失败？运算符要加空格！》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！