# CSS calc() Function

The CSS `calc()`

function allows you to use calculations within your CSS property values.

The `calc()`

function can be used in place of other unit types when setting widths, heights, angles, frequencies, etc. The actual value that the browser uses will be a result of the calcuation performed by the `calc()`

function.

Here's an example of how the `calc()`

function can be used:

In this example, the navbar is a fixed width while the article takes up the rest of the space — and resizes as you resize your browser.

We give the `article`

element a width of `calc(100% - 100px)`

. This calculates into 100 percent of the width, *minus* `100px`

(which is the width we gave the `nav`

element). This is because the `-`

(minus operator) subtracts the value on the right from the value on the left.

This ensures that the `article`

element will always take up the remaining width while remaining flush against the `nav`

element. The two elements can now co-exist side by side without any unwanted gaps in between. You can resize the browser as you wish and they will remain flush against each other. The the navbar will remain its fixed width, while the article will resize accordingly.

Without using `calc()`

, this would be very tricky, if not impossible, to implement with CSS alone.

Try changing the above example from `calc(100% - 100px)`

to a percentage value (say `75%`

or whatever works well) then resize your browser and you'll see what I mean. You'll need to keep updating the percentage value as you resize the browser.

## Calculating Margins

Here's another example.

This example's similar to the previous one, but this time, both containers use percentages for their widths. This is normally a trivial thing. However, the reason we use `calc()`

in this example is that the navbar's margin uses a different unit (`em`

). So we use the `calc()`

function to deduct the margin width from the article to ensure that the margin doesn't impact on the two containers.

So let's step through the code. The right container has a width of `calc(80% - 1em)`

. This calculates into `80%`

*minus* `1em`

. The left container has a right margin of `1em`

and that's why we subtract `1em`

from the width of the right container. If we didn't subtract the margin, there wouldn't be enough room for both boxes, and the nav be forced down below the article and its margin.

You can test this by changing `calc(80% - 1em)`

to just `80%`

and clicking the `Run` button.

## Background Images

You can use `calc()`

to position a background image based on the bottom or right side of the container.

Click `Preview` to open this example in a new window and you'll see that the background image remains at the bottom right, regardless of the size of the viewport.

In this case we use `calc()`

because the `background-position`

property only allows us to set the position from the *top, left* of the container. It doesn't allow us to specify an amount from the bottom, right of the container. However, using `calc()`

, the bottom and right edges can be found by using `100%`

. So it's a simple matter of deducting the desired amount from that figure.

## Where else can `calc()`

be used?

The `calc()`

function can be used wherever the `<length>`

, `<frequency>`

, `<angle>`

, `<time>`

, `<percentage>`

, `<number>`

, or `<integer>`

values can be used.

So `calc()`

can also be handy with grids or anything where you need to divide a container into many smaller areas — particularly when using mixed units across various elements and/or properties. It can also be good for calculating widths based on font size and things like that.

## Available Operators

The `calc()`

function lets you perform mathematical expressions using the addition (`+`

), subtraction (`-`

), multiplication (`*`

), and division (`/`

) operators.

## Official Syntax

The official syntax of the `calc()`

function is as follows:

```
<calc()> = calc( <calc-sum> )
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )
```

Also, the addition (`+`

) and subtraction (`-`

) operators must have white space on both sides. There's no such restriction for the multiplication (`*`

), and division (`/`

) operators.

See the official specification link below for more information on the syntax.

## CSS Specifications

- The
`calc()`

function is defined in CSS Values and Units Module Level 3 (W3C Candidate Recommendation, 29 September 2016)

## Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.