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
#div1 {
margin: auto;
width: calc(100% - 100px);
height: calc(30vh + 50px);
border: 1px solid black;
padding: 10px;
}
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
#div1 {
height: 100px;
width: max(50%, 300px);
border: 1px solid black;
padding: 10px;
}
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
#div1 {
height: 100px;
width: min(50%, 300px);
border: 1px solid black;
padding:
10px;
}
The CSS clamp() Function
The clamp() function is used to set a value that will adjust responsively between a minimum value, a preffered 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 between the min and max value, the preferred value is used
- If the preferred value is smaller than the min value, the min value is used
- If the preferred value is larger than the max value, the max value is used
CSS Syntax
clamp(min, preferred, max)
| Value | Description |
|---|---|
| min | Optional. The smallest allowed value |
| preferred | Required. The preferred value |
| max | Optional. The largest allowed value |
Let us look at an example:
Example
h2 {
font-size: clamp(1.5rem, 5vw, 3rem);
}
div {
border: 1px solid green;
padding: 10px;
font-size: clamp(1rem, 2.5vw, 2rem);
width:
clamp(200px, 50%, 600px);
}
CSS Functions Reference
Note: For a complete list of all CSS functions, visit our CSS Functions Reference.
