March 1Mar 1

Administrators

CSS Math Functions

CSS math functions allow mathematical expressions to be used as property values.

In this chapter, we will explain the following math functions:

calc()
max()
min()
clamp()

The CSS calc() Function

The calc() function performs a mathematical calculation that will be used as the property value.

The calc() function supports addition (+), subtraction (-), multiplication (*), and division (/), and can combine different units, like pixels and percentages.

CSS Syntax

calc(expression)

Value	Description
expression	Required. A mathematical expression. The result will be used as the value

Let us look at an example:

Example

Use calc() to calculate the width and the height of a <div> element:

#div1 {
margin: auto;
width: calc(100% - 100px);
height: calc(30vh + 50px);
border: 1px solid black;
padding: 10px;
}

Try it Yourself »

The CSS max() Function

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

CSS Syntax

max(value1, value2, ...)

Value	Description
value1, value2, ...	Required. A list of comma-separated values

Let us look at an example:

Example

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

#div1 {
height: 100px;
width: max(50%, 300px);
border: 1px solid black;
padding: 10px;
}

Try it Yourself »

The CSS min() Function

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

CSS Syntax

min(value1, value2, ...)

Value	Description
value1, value2, ...	Required. A list of comma-separated values

Let us look at an example:

Example

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

#div1 {
height: 100px;
width: min(50%, 300px);
border: 1px solid black;
padding: 10px;
}

Try it Yourself »

The CSS clamp() Function

The clamp() function is used to set a value that will adjust responsively between a minimum value and a maximum value depending on the size of the viewport.

The clamp() function has three parameters: a minimum value, a preferred value, and a maximum value. If the preferred value is smaller than the minimum value or larger than the maximum value, the preferred value is used.

CSS Syntax

clamp(min, preferred, max)

Value	Description
min	Optional. Specifies the smallest allowed value
preferred	Required. Specifies the preferred value
max	Optional. Specifies the largest allowed value

Let us look at an example:

Example

Set the <h2> element's minimum font-size to 2rem, and the maximum font-size to 3.5rem. Also, set the <p> element's minimum font-size to 1rem, and the maximum font-size to 2.5rem:

h2 {
font-size: clamp(2rem, 2.5vw, 3.5rem);
}

p {
font-size: clamp(1rem, 2.5vw, 2.5rem);
}

Try it Yourself »

CSS Functions Reference

For a complete list of all CSS functions, visit our CSS Functions Reference.

★ +1

Quote

CSS Math Functions

Featured Replies

CSS Math Functions