How to Use the CSS calc() Function

Calc() is a function inside CSS files that takes a single mathematical expression as its parameter, with the expression's result used as the value.

The expression inside the calc() function can contain any of the following operators:

• + Addition
• - Subtraction
• * Multiplication
• / Division

Here are some examples of how to use it:

    
      /** Additional **/
      div {
        width: calc(100% + 10px);
      }

      /** Subtraction **/
      div {
        width: calc(90% - 50px);
      }

      /** Multiplication **/
      div {
        width: calc(25% * 2);
      }

      /** Division **/
      div {
        width: calc(100% / 6);
      }
    
  

If you need more information on the calc() method, check out the Mozilla Developer Documentation on the subject.

As always, thanks for reading and happy coding!