DEV Community

Bernard Faria
Bernard Faria

Posted on

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.

Top comments (0)