CSS / Reference / calc(): Calculate CSS Values and Understand Their Types

calc() performs arithmetic inside a CSS value. It can combine compatible values, such as a percentage width and a fixed length, when the resulting type is valid for the property.

Syntax and value choices

Calc() is a function and has no property-style initial value or inheritance setting. The receiving property determines accepted types and percentage references.

.card { width: calc(100% - 40px); }
.title { font-size: calc(1rem + 4px); }

For supported values and conditions, see MDN calc.

Run the example and compare results

Save this complete code as css-reference-10373-example.html in UTF-8 and open it in a browser. Keep its demonstration styles in that file rather than pasting them into a site-wide stylesheet.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>calc() comparison example</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.samples > div { width: 300px; }
.target { width: calc(100% - 40px); padding: 0; border: 0; background: #bfe3ff; }
.reference { width: 100%; background: #ffd166; }
</style>
</head>
<body>
<main id="demo">
<h1>calc() comparison</h1>
<section class="samples"><div class="a"><p class="label">100% - 40px</p><div class="target">Width calculation</div></div><div class="b"><p class="label">100%</p><div class="reference">Width calculation</div></div></section>
</main>
</body>
</html>

With a 300px parent, the content widths are 260px and 300px. If the available width shrinks the flex parent, inspect its actual used width; the subtraction still leaves a 40px difference.

Operators and units

Multiplication and division precede addition and subtraction; parentheses can change that order. Write calc(100% - 40px), with spaces around the minus. Adding a unitless 20 to a length produces an incompatible expression rather than an automatic conversion.

Percentage references and special results

The property determines what a percentage refers to. Do not assume every 100% uses the same containing block. Invalid syntax, an incompatible result type, and arithmetic producing infinity or NaN are different cases. Supporting browsers may parse division by zero and clamp its result; it is not a useful shortcut for ordinary layout.

Distinguish types from special arithmetic results

Run this in the example file’s developer-tools Console. Expect true for the first expression and false for the second; the last result depends on typed-arithmetic support. CSS.supports() tests acceptance, not the resulting layout.

CSS.supports("width", "calc(100% - 40px)");
CSS.supports("width", "calc(100% - 20)");
CSS.supports("opacity", "calc(1px / 2px)");

Do not use division by zero as a layout technique. See MDN’s calc constants for infinity, NaN, and their treatment.

For relating calculated widths to actual box dimensions, see CSS Width, Height, min/max Limits, and box-sizing. Related properties to compare alongside these conditions are box-sizing.

When the result is missing or unexpected

• Inspect operator spacing, units, and parentheses when a declaration is crossed out.
• If the outer size differs from the calculated width, inspect padding, borders, and box-sizing.