CSSMath Functions
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
Thecalc() function performs a mathematical calculation that will be used as the property value.
Thecalc() function supports addition (+), subtraction (-), multiplication (*), and division (/), and can combine different units, like pixels and percentages.
CSS Syntax
| 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:
margin: auto;
width: calc(100% - 100px);
height: calc(30vh + 50px);
border: 1px solid black;
padding: 10px;
}
The CSS max() Function
Themax() function takes a comma-separated list of values, and uses the largest value from the list as the property value.
CSS Syntax
| 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:
height: 100px;
width: max(50%, 300px);
border: 1px solid black;
padding: 10px;
}
The CSS min() Function
Themin() function takes a comma-separated list of values, and uses the smallest value from the list as the property value.
CSS Syntax
| 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:
height: 100px;
width: min(50%, 300px);
border: 1px solid black;
padding: 10px;
}
The CSS clamp() Function
Theclamp() 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.
Theclamp() 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
| 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:
font-size: clamp(2rem, 2.5vw, 3.5rem);
}
p {
font-size: clamp(1rem, 2.5vw, 2.5rem);
}
CSS Functions Reference
For a complete list of all CSS functions, visit ourCSS Functions Reference.
