title | slug | page-type | browser-compat |
---|---|---|---|
calc() |
Web/CSS/calc |
css-function |
css.types.calc |
{{CSSRef}}
The calc()
CSS function lets you perform calculations when specifying CSS property values. It can be used with {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}}, or {{cssxref("<integer>")}} values.
{{EmbedInteractiveExample("pages/css/function-calc.html")}}
/* property: calc(expression) */
width: calc(100% - 80px);
The calc()
function takes a single expression as its parameter, and the expression's result is used as the value for a CSS property. In this expression, the {{Glossary("operand", "operands")}} can be combined using the {{Glossary("operator", "operators")}} listed below. When the expression contains multiple operands,calc()
uses the standard operator precedence rules:
+
- : Adds the specified operands.
-
- : Subtracts the second operand from the first operand.
*
- : Multiplies the specified operands.
/
- : Divides the left-side operand (dividend) by the right-side operand (divisor).
All operands, except those of type {{cssxref("<number>")}}, must be suffixed with an appropriate unit string, such as px
, em
, or %
. You can use a different unit with each operand in your expression. You may also use parentheses to establish computation order when needed.
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 {{Glossary("whitespace")}}. For instance,calc(50% -8px)
will be parsed as "a percentage followed by a negative length" — which is an invalid expression — whilecalc(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 mean0px
(or another length unit); instead, you must use the version with the unit:margin-top: calc(0px + 20px);
is valid, whilemargin-top: calc(0 + 20px);
is invalid. - The
calc()
function cannot directly substitute the numeric value for percentage types; for instancecalc(100 / 4)%
is invalid, whilecalc(100% / 4)
is valid. - Current implementations require that for the
*
and/
operators, one of the operands has to be unitless. For/
, the right operand must be unitless. For examplefont-size: calc(1.25rem / 1.25)
is valid butfont-size: calc(1.25rem / 125%)
is invalid.
{{csssyntax}}
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.
- MDN Understanding WCAG, Guideline 1.4 explanations
- Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
When calc()
is used where an {{cssxref("<integer>")}} is expected, the value will be rounded to the nearest integer. For example:
.modal {
z-index: calc(3 / 2);
}
This will give .modal
a final z-index
value of 2.
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>
{{EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', 'auto', '60')}}
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.
Let's look at some CSS:
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>
{{EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '700', '80')}}
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}}
{{Compat}}
- {{CSSxRef("<calc-constant>")}}
- CSS functions
- A Complete Guide to calc() in CSS (CSS-Tricks)