CSS Math 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
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.
