最近我开始在 CSS 中使用 calc(...) 方法。我很快了解到诸如： 之类的代码width: calc(100%-2)将不起作用，尽管在-运算符前后添加空格将解决问题并且 calc 方法将正常工作。
在做了一些研究之后，我发现多篇博客文章都提到了空格是必需的，许多人甚至指出了规范（CSS3 8.1.1），其中指出：
此外，+ 和 - 运算符的两边都需要空格。（ * 和 / 操作符可以在它们周围没有空格的情况下使用。）
现在，很明显，规范告诉我们这些运算符必须用空格包裹，但为什么呢？我已在规范中进一步阅读（通过第 8.1.2-4 节），如果在这些附加部分中进行了解释，我不理解其中的原因。
简而言之，有人可以解释为什么指定它calc(100% - 1)甚至calc(100%/2)是可接受的语法但不是calc(100%-1)吗？
该-字符是 CSS 标识中允许的字符之一。从这里给出的决议来看，他们似乎想防止在-没有空格的情况下使用可能产生的语法歧义，尤其是关键字值，例如min-content（尽管 AFAIK 关键字值还不允许在其中calc()——如果我错了，请纠正我）。
不过，并不是每个人都同意这个决议。
Mozilla 开发者网络很好地解释了这一点：
注意：
+and-运算符必须始终被空格包围。例如的操作数calc(50% -8px)将被解析为百分比后跟负长度、无效表达式，而 的操作数calc(50% - 8px)是百分比后跟减号和长度。更进一步，calc(8px + -50%)被视为一个长度，后跟一个加号和一个负百分比。
*and/运算符不需要空格，但允许并建议添加空格以保持一致性。
我认为您应该首先考虑CSS如何识别长度。长度定义为一个可选符号，后跟一个模块和一个可选的度量单位（尽管许多属性实际上需要它）：
<CSSlength> := [<sign>]<module>[<unit>]
因此，例如，有效的 CSS 长度是：
-3px
100em
+10pc
0
91
5%
像这样定义一个长度，CSS 引擎会解析以下内容：
calc(100% -1px);
作为一个长度，然后是另一个长度。在这种情况下，它后面会100%跟着-1px，这根本没有意义calc()。这也在相关的MDN 文档页面中进行了解释。
为了将两个长度关联起来，您需要使用不同的运算符，因此，按照上述逻辑，您需要使用空格：
calc(100% - 1px);