CSS Math Functions
Property values in CSS can be mathematical expressions, thanks to math functions.
This chapter looks at four of them:
calc()max()min()clamp()
The CSS calc() Function
Use calc() when a property value has to be the result of a calculation.
The supported operators are addition (+), subtraction (-), multiplication (*), and division (/), and units can be mixed, for example pixels with percentages.
Example
Both the width and the height of this <div> element come from calc().
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS calc() Function</title>
<style>
#div1 {
margin: auto;
width: calc(100% - 100px);
height: calc(30vh + 50px);
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h1>The calc() Function</h1>
<p>Use calc() to calculate the width and height of a div element:</p>
<div id="div1">This div has a width of calc(100% - 100px) and a height of calc(30vh + 50px).</div>
</body>
</html>
CSS Syntax
calc(expression)
The CSS max() Function
Given a comma-separated list, max() picks the largest value and uses it for the property.
Example
Between 50% and 300px, max() gives the width of #div1 whichever is larger.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS max() Function</title>
<style>
#div1 {
height: 100px;
width: max(50%, 300px);
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h1>The max() Function</h1>
<p>Use max() to set the width of the div to whichever value is largest, 50% or 300px:</p>
<div id="div1">This div has a width of max(50%, 300px). Resize the browser window to see the effect.</div>
</body>
</html>
CSS Syntax
max(value1, value2, ...)
The CSS min() Function
Given a comma-separated list, min() picks the smallest value and uses it for the property.
Example
Between 50% and 300px, min() gives the width of #div1 whichever is smaller.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS min() Function</title>
<style>
#div1 {
height: 100px;
width: min(50%, 300px);
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h1>The min() Function</h1>
<p>Use min() to set the width of the div to whichever value is smallest, 50% or 300px:</p>
<div id="div1">This div has a width of min(50%, 300px). Resize the browser window to see the effect.</div>
</body>
</html>
CSS Syntax
min(value1, value2, ...)
The CSS clamp() Function
A value that responds to the viewport size but stays within limits comes from clamp(): it moves between a minimum, a preferred value, and a maximum.
Those three are also its parameters, and they resolve like this:
- A preferred value between the min and max is used as it is.
- A preferred value below the min gives way to the min value.
- A preferred value above the max gives way to the max value.
Example
The <h2> element's font-size is 5vw, limited to at least 1.5rem and at most 3rem. The <div> element also relies on clamp(), for both its font-size and its width.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS clamp() Function</title>
<style>
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);
}
</style>
</head>
<body>
<h1>The clamp() Function</h1>
<h2>This Heading Uses clamp()</h2>
<p>The h2 font-size is set to clamp(1.5rem, 5vw, 3rem). It will never be smaller than 1.5rem or larger than 3rem.</p>
<div>This div uses clamp() for both font-size and width. The font-size is clamp(1rem, 2.5vw, 2rem) and the width is clamp(200px, 50%, 600px). Resize the browser window to see the effect.</div>
</body>
</html>
CSS Syntax
clamp(min, preferred, max)