# CSS - calc()

The `calc()`

CSS function can be used anywhere a `<length>`

, `<frequency>`

, `<angle>`

, `<time>`

, `<number>`

, or `<integer>`

is required. With `calc()`

, you can perform calculations to determine CSS property values.

## 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: 5%; /* fallback for browsers without support for calc() */ left: calc(40px); width: 90%; /* fallback for browsers without support for calc() */ width: calc(100% - 80px); border: solid black 1px; box-shadow: 1px 2px; background-color: yellow; padding: 6px; text-align: center; }

<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: 98%; /* fallback for browsers without support for calc() */ width: calc(100% - 1em); } #formbox { width: 130px; /* fallback for browsers without support for calc() */ 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

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.

## Syntax

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

### Values

- expression
- A mathematical expression, the result of which is used as the value.

### Expressions

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.

**Note:**Division by zero results in an error being generated by the HTML parser.

**Note:**The

`+`

and `-`

operators must always be surrounded by whitespace. The operand of `calc(50% -8px)`

for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of `calc(50% - 8px)`

is a percentage followed by a minus sign and a length. Even further, `calc(8px + -50%)`

is treated as a length followed by a plus sign and a negative percentage.The

`*`

and `/`

operators do not require whitespace, but adding it for consistency is allowed, and recommended.**Note:**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.### 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> )`

## Description

* * **This is an experimental technology**

Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

The `calc()`

CSS function can be used anywhere a `<length>`

, `<frequency>`

, `<angle>`

, `<time>`

, `<number>`

, or `<integer>`

is required. With `calc()`

, you can perform calculations to determine CSS property values.

It is possible to nest `calc()`

function, the internal ones being considered as simple parenthesis `()`

.

## Browser Compatibility

Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|

Basic support | 19 -webkit 26 |
4.0 (2) -moz 16 (16) |
9 | ? | 6 -webkit^{[1]}7 |

On gradients' color stops | 19 -webkit 26 |
19 (19) | 9 | ? | 6 -webkit^{[1]}7 |

nested calc() | 51^{[2]} |
48 (48) | ? | ? | ? |

Support for `<number>` values |
? | 48 (48) | ? | ? | ? |

Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|

Basic support | ? | 4.0 (2) -moz 16.0 (16) |
? | ? | 6 -webkit 7 |

On gradients' color stops | ? | 19.0 (19) | ? | ? | ? |

nested calc() | 51^{[2]} |
48 (48) | ? | ? | ? |

Support for `<number>` values |
? | 48 (48) | ? | ? | ? |

[1] In WebKit 6.0 the implementation was incorrect.

[2] See Blink bug 600113

## See Also

## Specifications

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

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

## License

© 2016 Mozilla Contributors

Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

https://developer.mozilla.org/en-us/docs/web/css/calc