为什么设置calc计算宽度为0的inline-block元素实际宽度不为0？

问题原因 #

你使用的calc(var(--show) - 1)计算结果为无单位的数值0，不同属性对值的类型要求不同，导致两个属性表现不一致：

• opacity属性本身支持无单位的[0,1]区间数值，所以表达式合法，最终计算结果为0，符合预期。
• width是长度类型属性，要求值必须为带单位的长度值。CSS仅支持直接写width: 0这种无单位0的语法糖，该规则不适用于calc的计算结果，因此这个width声明会被浏览器判定为非法并忽略。inline-block元素的宽度会回退为默认的fit-content规则，由内部文本内容撑开，你看到的22.2333px就是文本"test"的实际渲染宽度。

修复方法 #

给calc表达式补充单位即可，如果你要使用px作为宽度单位，修改为以下写法：

.test {
  /* 其他属性保持不变 */
  width: calc((var(--show) - 1) * 1px);
}

这样calc的输出结果就是带px单位的0，会被width属性正常识别，元素宽度就会变为0。

内容的提问来源于stack exchange，提问作者user254694