CSS Math Functions

❮ Previous Next ❯

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)

Value	Description
expression	Required. A mathematical expression. The result will be used as the value. The following operators can be used: + - * /

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;
padding: 5px;
}

Try it Yourself »

The max() Function

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

CSS Syntax

max(value1, value2, ...)

Value	Description
value1, value2, ...	Required. A list of comma-separated values - where the largest value is chosen

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

Try it Yourself »

The min() Function

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

CSS Syntax

min(value1, value2, ...)

Value	Description
value1, value2, ...	Required. A list of comma-separated values - where the smallest value is chosen

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

Try it Yourself »

All CSS Math Functions

Function	Description
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

❮ Previous Next ❯