# CSS Math Functions

The CSS math functions allow mathematical expressions to be used as property values. Here, we will explain the `calc()`, `max()` and `min()` functions.

## All CSS Math Functions​

FunctionDescription
calc()Allows you to perform calculations to determine CSS property values
max()Uses the largest value, from a comma-separated list of values, as the property value
min()Uses the smallest value, from a comma-separated list of values, as the property value

## The calc() Function​

The `calc()` function performs a calculation to be used as the property value.

### CSS Syntax​

``attribute: calc(expression)``

where:

• expression: a mathematical expression. The result will be used as the value. The following operators can be used: + - * /. The expression is a required parameter for calc function.

Example: Use `calc()` to calculate the width of a `<div>` element:

``#div1 {      position:  absolute;      left:  50px;      width:  calc(100% - 100px);      border:  1px solid black;      background-color:  yellow;      padding:  5px;  }``

## The max() Function​

The `max()` function uses the largest value, from a comma-separated list of values, as the property value.

### CSS Syntax​

``attribute: max(value1, value2, ...)``

where:

• value1, value2, ... are a list of comma-separated values where the largest value is choosen. This is a required parameter for max function.

Example: Use `max()` to set the width of #div1 to whichever value is largest, 50% or 300px:

``#div1 {      background-color:  yellow;      height:  100px;      width:  max(50%, 300px);  }``

## The min() Function​

The `min()` function uses the smallest value, from a comma-separated list of values, as the property value.

### CSS Syntax​

``attribute: min(value1, value2, ...)``

where:

• value1, value2, ... are a list of comma-separated values where the smallest value is choosen. This is a required parameter for min function.

Example: Use `min()` to set the width of #div1 to whichever value is smallest, 50% or 300px:

``#div1 {      background-color:  yellow;      height:  100px;      width:  min(50%, 300px);  }``