CSS Math Functions

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.

expression )

Required. A mathematical expression. The result will be used as the value Let us look at an example:

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

value1, value2, ...)

Description value1, value2, ...

Let us look at an example:

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

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

value1, value2, ...)

Description value1, value2, ...

Let us look at an example:

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

padding:

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.

min, preferred, max )

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:

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:

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