Calc() function on CSS

The calc () function takes a simple expression as a parameter and the result of this expression is usually used as a value for height and width.

The operators used are:

• Addition: width: calc (100% + 80px);
• Subtraction: height: calc (100% - 1rem);
• Multiplication: height: calc (50% * 3);
• Division: width: calc (100% / 6);

Observations

• Division by 0 (zero) results in an error generated by the HTML parser.
• The + and - operators must be surrounded by white space.
• The * and / operators do not require white space, but adding it for consistency is allowed and recommended.
• It is allowed to nest calc () functions, in which case the internal ones are treated as simple parentheses.