# Using CSS math functions

CSS provides four mathematical expression functions: `calc()`

, `min()`

, `max()`

, and `clamp()`

. We'll take look at each one in some detail and we'll also talk about how we can use them in CSS variables.

## calc() #

The calc() function supports four arithmetic operations: addition (`+`

), subtraction (`-`

), multiplication (`*`

), and division (`/`

).

This will allow you to dynamically calculate the width and height of a container to create responsive layouts.

In this example, you can set the margins of an element minus a fixed amount:

```
div {
width: calc(80vw - 20px);
}
```

## min() #

The min() function is used to set the smallest acceptable value for a rule.

It takes 2 comma-separated values that offer the values the browser will choose from.

In this example, the font-size attribute will be `1vw`

unless the computer value of 1vw is smaller than `25px`

(I can only think of this happening on very large screens).

`font-size: min(25px,1vw);`

## max() #

The `max()`

function takes two values, like the `min()`

function, and uses the largest of the two values.

In this example, the font will be at least 25px and never larger than 1vw if the 1vw is larger than 25px.

`font-size: max(25px,1vw);`

## clamp() #

The `clamp()`

function defines an acceptable range of various values for a layout element: minimum, preferred, and maximum.

The function takes three values separated by a comma and the values may be of different types.

- The first value represents the minimum value. If the preferred value is less than this value, the minimum value will be used
- The second value represents the preferred value. The value will be used as long as it stays between the minimum and maximum values
- The third value represents the maximum allowed value. If the preferred value is larger than this value, this value will be used

It is, in essence, the combination of both `min()`

and `max()`

features where the value will never be smaller than the minimum value or larger than the maximum value.

In this example, the font-size attribute will be 4vw + 1rem, as long as the calculated value, based on the base font size of the page and the size of the viewport, is no smaller than 1rem or larger than 4rem.

```
.example {
font-size: clamp(
1rem,
4vw + 1rem,
4rem
);
}
```

CSS math functions can be used everywhere you can use a CSS length value. This gives us additional flexibility when it comes to dynamically sizing elements.