`calc()`

lets us use calculations to determine CSS values. Its greatest strength is that it allows us to combine different CSS types. For example, you could set the width of an item to be 100% but offset by 5px. With `calc()`

that would look like `width: calc(100% - 5px)`

. Browser support for `calc()`

is fantastic with all major browsers supporting it https://caniuse.com/#feat=calc.

Addition, subtraction, multiplication and division can be used in calc(): `+ - * /`

. Below, I have a widget to play around with `calc()`

including addition and subtraction. It changes the width of the green square.

Content Width

*help_outline*

```
.content {
width: calc(100% - 0%);
}
```

When using calc with **multiplication**, one of the values must be a number (no `px`

). When using calc with **division**, the right-hand number must be a number as well. Also make sure that you arenâ€™t dividing by 0. Here is another widget with multiplication and division.

Content Width

*help_outline*

```
.content {
width: calc(100% / 2);
}
```

Keep in mind that `calc()`

is not restricted to length types. Although not as useful, `calc()`

can be applied to angles as well. The widget below can rotate the green rectangle based on a calculated angle value.

Content Transform

*help_outline*

```
.content {
transform: rotateZ(calc(100deg - 0deg));
}
```

Here is `calc()`

used to set the `background-color`

of the rectangle.

Content Transform

*help_outline*

```
.content {
background-color: rgb(calc(100 - 0), 100, 100);
}
```

## Conclusion

While this playground may not illustrate the effectiveness of `calc()`

in a real world website, it does show how useful `calc()`

can be. Here is a MDN article on calc().