CSS Math Functions
Mathematical expressions can be utilized as property values thanks to the CSS math functions. The functions max(), min(), and calc() will be explained in this section.
The calc() Function
A calculation is carried out using the calc() function and is used as the property value.
CSS Syntax
| Value | Description |
|---|---|
| expression | Required. A mathematical expression. The result will be used as the value. The following operators can be used: + - * / |
Example
Use calc() to calculate the width of a <div> element:
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
The max() Function
The largest value from a list of values separated by commas is used as the property value by the max() function.
CSS Syntax
| Value | Description |
|---|---|
| value1, value2, ... | Required. A list of comma-separated values - where the largest value is chosen |
Let us look at an example:
Example
Use max() to set the width of #div1 to whichever value is largest, 50% or 300px:
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
The min() Function
The property value of the min() function is the least value in a list of numbers separated by commas.
CSS Syntax
| Value | Description |
|---|---|
| value1, value2, ... | Required. A list of comma-separated values - where the smallest value is chosen |
Let us look at an example:
Example
Use min() to set the width of #div1 to whichever value is smallest, 50% or 300px:
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
