calc()
======

The **`calc()`** CSS function lets you perform calculations when specifying CSS property values. It can be used with `<length>`, `<frequency>`, `<angle>`, `<time>`, `<percentage>`, `<number>`, or `<integer>` values.

Try it
------

Syntax
------


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


The `calc()` function takes a single expression as its parameter, and the expression's result is used as the value for a CSS property. In this expression, the operands can be combined using the operators listed below. When the expression contains multiple operands,`calc()` uses the standard operator precedence rules:

`+`

Adds the specified operands.

`-`

Subtracts the second operand from the first operand.

`*`

Multiplies the specified operands.

`/`

Divides the left-side operand (dividend) by the right-side operand (divisor).

All operands, except those of type `<number>`, must be suffixed with an appropriate unit string, such as `px`, `em`, or `%`. You can use a different unit with each operand in your expression. You may also use parentheses to establish computation order when needed.

### Notes

 Serializing the arguments inside `calc()` follows the IEEE-754 standard for floating point math which means there's a few cases to be aware of regarding the `infinity` and `NaN` constants.
 For more details on how constants are serialized, see the `calc-constant` page.

In addition, the following notes apply:

* The `+` and `-` operators **must be surrounded by whitespace**. For instance, `calc(50% -8px)` will be parsed as "a percentage followed by a negative length" — which is 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 recommended.
* 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.
* For lengths, you can't use `0` to mean `0px` (or another length unit); instead, you must use the version with the unit: `margin-top: calc(0px + 20px);` is valid, while `margin-top: calc(0 + 20px);` is invalid.
* The `calc()` function cannot directly substitute the numeric value for percentage types; for instance `calc(100 / 4)%` is invalid, while `calc(100% / 4)` is valid.
### Formal syntax
```

<calc()> =   
  calc( <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*    
  
<calc-product> =   
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*    
  
<calc-value> =   
  <number>        |  
  <dimension>     |  
  <percentage>    |  
  <calc-keyword>  |  
  ( <calc-sum> )    
  
<calc-keyword> =   
  e          |  
  pi         |  
  infinity   |  
  -infinity  |  
  NaN          
  
```

Accessibility concerns
----------------------

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


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


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

* MDN Understanding WCAG, Guideline 1.4 explanations
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
Usage with integers
-------------------

When **`calc()`** is used where an `<integer>` is expected, the value will be rounded to the nearest integer. For example:


```css
.modal {
  z-index: calc(3 / 2);
}
```


This will give `.modal` a final `z-index` value of 2.

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:


```css
.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;
}
```



```html
<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:


```css
input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

#form-box {
  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:


```html
<form>
  <div id="form-box">
    <label for="misc">Type something:</label>
    <input type="text" id="misc" name="misc" />
  </div>
</form>
```

### Nested `calc()` with CSS Variables

You can also use `calc()` with CSS variables. Consider the following code:


```css
.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 |
| --- |
| CSS Values and Units Module Level 4 # calc-func |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<calc-constant>`
* CSS functions
* A Complete Guide to calc() in CSS (CSS-Tricks)