calc()
The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used with , , , , , , or values.
Try it
Syntax
/* property: calc(expression) */ width: calc(100% - 80px);
The calc() function takes a single expression as its parameter, with the expression’s result used as the value. The expression can be any simple expression combining the following operators, using standard operator precedence rules:
Multiplication. At least one of the arguments must be a .
Division. The right-hand side must be a .
Notes
Serializing the arguments inside calc() follows the IEEE-754 standard for floating point math which means there’s a few cases to be aware of regarding the infinity and NaN constants. For more details on how constants are serialized, see the calc-constant page.
In addition, the following notes apply:
- The + and — operators must be surrounded by whitespace. For instance, calc(50% -8px) will be parsed as «a percentage followed by a negative length» — which is an invalid expression — while calc(50% — 8px) is «a percentage followed by a subtraction operator and a length». Likewise, calc(8px + -50%) is treated as «a length followed by an addition operator and a negative percentage».
- The * and / operators do not require whitespace, but adding it for consistency is recommended.
- Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified.
- It is permitted to nest calc() functions, in which case the inner ones are treated as simple parentheses.
- For lengths, you can’t use 0 to mean 0px (or another length unit); instead, you must use the version with the unit: margin-top: calc(0px + 20px); is valid, while margin-top: calc(0 + 20px); is invalid.
- The calc() function cannot directly substitute the numeric value for percentage types; for instance calc(100 / 4)% is invalid, while calc(100% / 4) is valid.
Formal syntax
=
calc( )
=
[ [ ‘+’ | ‘-‘ ] ]*
=
[ [ ‘*’ | ‘/’ ] ]*
=
|
|
|
|
( )
=
e |
pi |
infinity |
-infinity |
NaN
Accessibility concerns
When calc() is used for controlling text size, be sure that one of the values includes a relative length unit, for example:
h1 font-size: calc(1.5rem + 3vw); > This ensures that text size will scale if the page is zoomed.
Usage with integers
This will give .modal a final z-index value of 2.
Examples
Positioning an object on screen with a margin
calc() makes it easy to position an object with a set margin. In this example, the CSS creates a banner that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window:
.banner position: absolute; left: 40px; width: calc(100% - 80px); border: solid black 1px; box-shadow: 1px 2px; background-color: yellow; padding: 6px; text-align: center; box-sizing: border-box; > div class="banner">This is a banner!div>
Automatically sizing form fields to fit their container
Another use case for calc() is to help ensure that form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin.
input padding: 2px; display: block; width: calc(100% - 1em); > #form-box width: calc(100% / 6); border: 1px solid black; padding: 4px; > Here, the form itself is established to use 1/6 of the available window width. Then, to ensure that input fields retain an appropriate size, we use calc() again to establish that they should be the width of their container minus 1em. Then, the following HTML makes use of this CSS:
form> div id="form-box"> label for="misc">Type something:label> input type="text" id="misc" name="misc" /> div> form>
Nested calc() with CSS Variables
You can also use calc() with CSS variables. Consider the following code:
.foo --widthA: 100px; --widthB: calc(var(--widthA) / 2); --widthC: calc(var(--widthB) / 2); width: var(--widthC); > After all variables are expanded, widthC ‘s value will be calc(calc(100px / 2) / 2) , then when it’s assigned to .foo ‘s width property, all inner calc() s (no matter how deeply nested) will be flattened to just parentheses, so the width property’s value will be eventually calc((100px / 2) / 2) , i.e. 25px . In short: a calc() inside of a calc() is identical to just parentheses.
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on May 25, 2023 by MDN contributors.
Your blueprint for a better internet.
CSS Math Functions
The CSS math functions allow mathematical expressions to be used as property values. Here, we will explain the calc() , max() and min() functions.
The calc() Function
The calc() function performs a calculation to be 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: + — * / |
Let us look at an example:
Example
Use calc() to calculate the width of a element:
#div1 <
position: absolute;
left: 50px;
width: calc(100% — 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
>
The max() Function
The max() function uses the largest value, from a comma-separated list of values, as the property value.
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:
The min() Function
The min() function uses the smallest value, from a comma-separated list of values, as the property value.
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:
All CSS Math Functions
| Function | Description |
|---|---|
| calc() | Allows you to perform calculations to determine CSS property values |
| max() | Uses the largest value, from a comma-separated list of values, as the property value |
| min() | Uses the smallest value, from a comma-separated list of values, as the property value |
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.