How to Use the CSS calc() Function

Nick Major–September 07, 2019
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:
CSS
 
/** 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!