# The CSS calc() function

> Learn how the CSS calc() function performs math on values, like calc(80% - 100px), mixing percentages and lengths with the +, -, * and / operators.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2019-06-07 | Topics: [CSS](https://flaviocopes.com/tags/css/) | Canonical: https://flaviocopes.com/css-calc/

The `calc()` function lets you perform basic math operations on values, and it's especially useful when you need to add or subtract a length value from a percentage.

This is how it works:

```css
div {
	max-width: calc(80% - 100px)
}
```

It returns a length value, so it can be used anywhere you expect a pixel value.

You can perform

+ additions using `+`
+ subtractions using `-`
+ multiplication using `*`
+ division using `/`

> One caveat: with addition and subtraction, the space around the operator is mandatory, otherwise it does not work as expected.

Examples:

```css
div {
	max-width: calc(50% / 3)
}
```

```css
div {
	max-width: calc(50% + 3px)
}
```

If you're mixing units because you're converting between px and rem, my free [CSS units converter](https://flaviocopes.com/tools/css-units/) can help.