The ** calc()** CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a

`<length>`

, `<frequency>`

, `<angle>`

, `<time>`

, `<percentage>`

, `<number>`

, or `<integer>`

is allowed.The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

## Syntax

```
/* property: calc(expression) */
width: calc(100% - 80px);
```

The `calc()`

function takes a single expression as its parameter, with the expression's result used as the value. The expression can be any simple expression combining the following operators, using standard operator precedence rules:

`+`

- Addition.
`-`

- Subtraction.
`*`

- Multiplication. At least one of the arguments must be a
`<number>`

. `/`

- Division. The right-hand side must be a
`<number>`

.

The operands in the expression may be any `<length>`

syntax value. You can use different units for each value in your expression, if you wish. You may also use parentheses to establish computation order when needed.

### Notes

- The
`+`

and`-`

operators**must be surrounded by whitespace**. For instance,`calc(50% -8px)`

will be parsed as a percentage followed by a negative length — an invalid expression — while`calc(50% - 8px)`

is a percentage followed by a subtraction operator and a length. Likewise,`calc(8px + -50%)`

is treated as a length followed by an addition operator and a negative percentage. - The
`*`

and`/`

operators do not require whitespace, but adding it for consistency is both allowed and recommended. - Division by zero results in an error being generated by the HTML parser.
- Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables
*may*be treated as if`auto`

had been specified. - It is permitted to nest
`calc()`

functions, in which case the inner ones are treated as simple parentheses.

### Formal syntax

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

## Accessibility concerns

When `calc()`

is used for controlling text size, be sure that one of the values includes a relative length unit, for example:

```
h1 {
font-size: calc(1.5rem + 3vw);
}
```

This ensures that text size will scale if the page is zoomed.

## Usage with integers

When ** calc()** is used where an

`<integer>`

is expected, the value will be rounded to the nearest integer. For example:```
.modal {
z-index: calc(3 / 2);
}
```

This will give `.modal`

a final `z-index`

value of 2.

**Note:** The Chrome browser currently won’t accept some values returned by ** calc()** when an integer is expected. This includes any division, even if it results in an integer. ie.

`z-index: calc(4 / 2);`

will not be accepted.## Examples

### Positioning an object on screen with a margin

`calc()`

makes it easy to position an object with a set margin. In this example, the CSS creates a banner that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window:

```
.banner {
position: absolute;
left: 40px;
width: calc(100% - 80px);
border: solid black 1px;
box-shadow: 1px 2px;
background-color: yellow;
padding: 6px;
text-align: center;
box-sizing: border-box;
}
```

`<div class="banner">This is a banner!</div>`

### Automatically sizing form fields to fit their container

Another use case for `calc()`

is to help ensure that form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin.

Let's look at some CSS:

```
input {
padding: 2px;
display: block;
width: calc(100% - 1em);
}
#formbox {
width: calc(100% / 6);
border: 1px solid black;
padding: 4px;
}
```

Here, the form itself is established to use 1/6 of the available window width. Then, to ensure that input fields retain an appropriate size, we use `calc()`

again to establish that they should be the width of their container minus 1em. Then, the following HTML makes use of this CSS:

```
<form>
<div id="formbox">
<label>Type something:</label>
<input type="text">
</div>
</form>
```

### Nested `calc()`

with CSS Variables

You can also use `calc()`

with CSS variables. Consider the following code:

```
.foo {
--widthA: 100px;
--widthB: calc(var(--widthA) / 2);
--widthC: calc(var(--widthB) / 2);
width: var(--widthC);
}
```

After all variables are expanded, `widthC`

's value will be `calc( calc( 100px / 2) / 2)`

, then when it's assigned to `.foo`

's width property, all inner `calc()`

s (no matter how deeply nested) will be flattened to just parentheses, so the `width`

property's value will be eventually `calc( ( 100px / 2) / 2)`

, i.e. `25px`

. In short: a `calc()`

inside of a `calc()`

is identical to just parentheses.

## Specifications

Specification | Status | Comment |
---|---|---|

CSS Values and Units Module Level 3 The definition of 'calc()' in that specification. |
Candidate Recommendation | Initial definition |

## Browser compatibility

BCD tables only load in the browser