Introduction to CSS Math Functions

If you are interested to learn about the CSS important rule

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

The calc() Function

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

CSS Syntax

calc(expression)

Let us look at an example:

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;
}```

The max() Function

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

CSS Syntax

max(value1value2, …)

Let us look at an example:

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

min(value1value2, …)

Let us look at an example:

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);
}```

All CSS Math Functions

Introduction to CSS Math Functions