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 |
Example
#div1 {
margin: auto;
width: calc(100% - 100px);
height: calc(30vh + 50px);
border: 1px solid black;
padding: 10px;
}Live preview
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 |
Example
#div1 {
height: 100px;
width: max(50%, 300px);
border: 1px solid black;
padding: 10px;
}Live preview
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 |
Example
#div1 {
height: 100px;
width: min(50%, 300px);
border: 1px solid black;
padding: 10px;
}Live preview
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 |
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);
}Live preview