The CSS `calc()`

function is used to evaluate simple arithmetic expressions in CSS.

*Jump ahead:*

The arithmetic expressions are addition, subtraction, division, and multiplication. These expressions follow a precedence order:

**P**â€“ Parentheses**D**â€“ Division**M**â€“ Multiplication**A**â€“ Addition**S**â€“ Subtraction

Any parentheses in the expression are evaluated first, from left to right. Then the division operations are performed, then multiplication, addition, and, lastly, subtraction.

For example, we have this expression argument in `calc`

:

calc(4px - (9px + 1px) / 5px * 9px)

See the Pen

css calc example by Chidume David (@philipsz-davido)

on CodePen.

The parentheses `(9px + 1px)`

are evaluated first, so we now have this:

4px - 10px / 5px * 9px

Next is the division op. `10px / 5px`

is evaluated to this:

4px - 2px * 9px

Then, the multiplication op is evaluated, `2px * 9px`

:

4px - 18px

Finally, the subtraction op is evaluated, `4px - 18px`

:

-14px

## Value types

Not all value types in CSS are permissible in the `calc`

function. Permitted values include:

`<length>`

`<frequency>`

`<angle>`

`<time>`

`<percentage>`

`<number>`

`<integer>`

## Rules

There are certain rules that must be strictly followed when using the `calc`

function.

**1.)** The RHS and LHS values of the addition and subtraction operators must be of the same unit type, or they can be a `number`

and an `integer`

.

`5px + 2`

is invalid because the values are of different unit types. The first is a`<length>`

type, while the second is a`<number>`

.`2px + 5vh`

is valid because both are of`<length>`

unit types; operands in an expression may be of any`<length>`

syntax value.`3.4 - 4`

is valid.

**2.)** The addition and the subtraction operator values must be whitespaced; failure would lead to incorrect parsing and evaluation of the expression.

`4px-5vh`

is invalid because there are no whitespaces before and after the`-`

sign; the expression would be interpreted as 4px and a negative 5vh. To correct this, simply add spaces between them:`4px - 5vh`

.

**3.)** One of the values in a multiplication operation must be a `<number>`

(or `<integer>`

).

`4px * 5em`

is invalid because all of the values are of`length`

unit types.`4px * 5`

is valid because the RHS value is a`<number>`

.

N.B., the multiplication and division operators do not need whitespaces, unlike the addition and subtraction operators, e.g.,`4*5px`

is valid. However, they are recommended for consistency.

**4.)** In the division operation, the RHS value must be a `<number>`

.

`4px / 5em`

is invalid because the RHS value (`5em`

) is a length unit.`4px / 5`

is valid because the RHS value (`5`

) is a`<number>`

.- The unit type of its return value after an evaluation is determined by the LHS unit type. If the LHS unit type is and
`<integer>`

, then the return unit type is`<number>`

.

**5.)** Any division that yields 0 is considered invalid.

`4rem/0`

yields 0, so it is invalid.

**6.)** The `calc`

function supports a maximum of 20 terms.

- A term is
`<length>`

,`<frequency>`

,`<angle>`

,`<time>`

,`<percentage>`

,`<number>`

, or`<integer>`

. If this term number is exceeded, then the expression argument in the`calc`

is invalid.

## CSS variables and `calc`

CSS variables can be used in the `calc`

expression arg. Note that CSS variables are used to store variables in selectors and use them anywhere in the styling with the `var`

function.

::root { --width: 500px; --height: 900px; } div.burger { width: calc(10% - var(--width)); height: calc(12% + var(--height)); }

We have CSS vars `--width`

and `--height`

declared in the root scope, which are then retrieved using the `var(...)`

function inside the `calc`

function.

`div.burger`

width length will be `calc(10% - 500px)`

. The `var(--width)`

in the `calc(10% - var(--width))`

statement will be replaced with `500px`

. The height of `div.burger`

will be `calc(12% + 900px)`

.

## Examples of `calc`

usage

`calc`

comes in handy quite often during development. Let’s see where we can use `calc`

instead of `margin`

to set a gap on a button’s left and right sides.

.btn { padding: 6px 12px; margin-bottom: 0; font-weight: 400; cursor: pointer; text-align: center; white-space: nowrap; display: inline-block; background-image: none; border-radius: 3px; box-shadow: none; border: 1px solid transparent; } .btn-block { width: calc(100% - 20px); }

The `.btn.block`

selector stretches the button across its parent container with a 20px gap between the left and right sides.

## Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If youâ€™re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.https://logrocket.com/signup/LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web and mobile apps â€” Start monitoring for free.