Why doesn't css-calc() work when using 0 inside the equation?

Question

I\'m using calc() to set the top: attribute in a class. I need some help understanding how calc() gets used - two equations I believe

Answer 1

The first equation is invalid because it will lead to calc(-10px + 0)

Note: Because s are always interpreted as s or s, "unitless 0" s aren’t supported in calc(). That is, width: calc(0 + 5px); is invalid, even though both width: 0; and width: 5px; are valid. ^ref

And if the result was non-zero you will fall into this:

At + or -, check that both sides have the same type, or that one side is a and the other is an . If both sides are the same type, resolve to that type. If one side is a and the other is an , resolve to .

The last one is more logical since 10px + 5 has no meaning whearas we may think that 10px + 0 is simply 10px but for the browser it's not.