NotOneBit Blog

Get started today on your next web project with NotOneBit
We've been doing web development before you were born *

CSS calc()’s Annoying Space

If you’ve ever tried to use the CSS calc() function only to fail to see anything change, make sure you have your code properly spaced when using plus or minus.

For example, this fails:

calc(100%-50px)

But this will work:

calc(100% - 50px)

The white space around the minus sign is REQUIRED! As the W3 states:

white space is required on both sides of the + and – operators. (The * and / operators can be used without white space around them).

As MDN states:

Note: The + and – operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% – 8px) is a percentage followed by a minus sign and a length. Even further, calc(8px + -50%) is treated as a length followed by a plus sign and a negative percentage. The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended.

facepalm[1]

Posted in CSS

One thought on “CSS calc()’s Annoying Space

Leave a Reply to Viet Anh Auto Cancel reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: