calc() is a native CSS way to do simple math right in CSS as a replacement for any length value (or pretty much any number value). It has four simple math operators: add (+), subtract (-), multiply (*), and divide (/).
The calc() CSS function can be used anywhere a <length>, <frequency>, <angle>, <time>, <number>, or <integer> is required. With calc(), you can perform calculations to determine CSS property values.
It is possible to nest calc() function, the internal ones being considered as simple parenthesis ().
Syntax
/* property: calc(expression) */
width: calc(100% - 100px);
Expressions
The expression can be any simple expression combining the following operators, using standard operator precedence rules:
+
Addition.
-
Subtraction.
*
Multiplication. At least one of the arguments must be a <number>.
/
Division. The right-hand side must be a <number>.
The operands in the expression may be any length syntax value. You can use different units for each value in your expression, if you wish. You may also use parentheses to establish computation order when needed.
You can see a couple of use cases for calc()
