calc()

Performs mathematical calculations to determine values for properties.

Syntax

<property>: calc(<expression>);

where <expression> can be any simple expression combining the following operators, using standard operator precedence rules:

  • +: addition.
  • -: subtraction.
  • *: multiplication.
  • /: division.

Note: Spaces are required around the - and + operators. They are not required for / and * operators.

Example 1

Calculate the total width of the div using absolute lengths.

div {
width: calc(10px + 120px);
}

This will be 130px wide.

Example 2

Set the value of the .box element’s width property to the result of 50% - 10px:

.box {
width: calc(50% - 10px);
}

Absolute lengths and relative lengths are both available to perform calculations.

Example 3

Set the width property to 10px less than the CSS variable --custom-width:

.card {
--custom-width: 33%;
width: calc(var(--custom-width) - 10px));
}

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn CSS on Codecademy

Contributors