Почему я должен указать идентификатор единицы (например, 'px'), передавая 0 в качестве единственного аргумента функции calc()?

CSS-значения и единицы измерения уровня 3:

... для нулевой длины идентификатор блока является необязательным (т.е. может быть синтаксически представлен как <number> '0).

Вот почему большинство из нас бросает идентификатор устройства при работе с 0s, так как 0px, 0em, 0% и т.д. все оцениваются с одинаковой длиной.

В той же документации также указано, что функция calc():

... можно использовать везде, где допускаются значения <length>, <frequency>, <angle>, <time>, <number> или <integer>. Компоненты выражения calc() могут быть буквальными значениями, выражениями attr() или calc() или <percentage> значениями, которые разрешают один из предыдущих типов.

Проблема заключается в том, что последние версии Chrome, Firefox, Opera и Internet Explorer рассматривают calc(0) как недопустимое выражение. 0 здесь - это значение, которое разрешает тип <number> (как нам известно из первого фрагмента, который я цитировал в этом сообщении).

Если мы попытаемся проверить width: calc(0) на W3C собственный CSS Validator, мы получаем следующую ошибку:

Значение Ошибка: ширина calc(0) не является значением ширины: calc(0)

Однако, если мы попробуем и проверим width: 1, вместо этого получим следующую ошибку, которая, как представляется, противоречит этой ошибке:

Значение Ошибка: только ширина 0 может быть длиной. Вы должны положить блок после своего номера: 1

---

Пример

В этом примере красная рамка 1px применяется к каждому элементу code. В попытке переопределить ширину границы первая имеет calc(0), заданную как ширина границы, а последняя имеет calc(0px).

code {
  display: inline-block;
  padding: 2px;
  
  border: 1px solid red;
}

code:first-of-type {
  border-width: calc(0);
}

code:last-of-type {
  border-width: calc(0px);
}

<code>border-width: calc(0);</code>
<code>border-width: calc(0px);</code>