How to use the CSS calc() function

Not sure what the CSS calc() function is all about? Well – read on because you’re about to learn something new.

CSS calc() is a function used for simple calculations to determine CSS property values right in CSS. The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values.

Advantages

The most useful feature of this function is the ability to mix units. For example, you can multiply pixels with percentage.

What if I’m already using math functions with a preprocessor? If you’re using preprocessor math functions then it’s time to switch to native CSS math because it’s more powerful and you can simply do more things with it.

Finally there’s a great browser support. According to “Can I Use”, this function is supported by 80.79% of browsers. On the image below you can see the browser support table.

Syntax and a few things to note

Here you can see an example of CSS calc() in action:

This is a list of a couple of things you should know about CSS calc() before you start working with it:

Calculation is conducted from left to right.

Division or Multiplication will be calculated first and Math expressions inside parentheses will also be calculated first.