Flash cards
Review the key moves
What is the main idea behind CSS Math Functions?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___( expression )Put the learning moves in the order that makes the concept easiest to apply.
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