What does calc() allow me to combine in a CSS value?
Quick answer
Use calc() for arithmetic that produces a value type accepted by the CSS property. You can add or subtract compatible types, such as a length and a percentage in a property that accepts both; a length and a time cannot be added. Put spaces on both sides of + and -, but spaces around * and / are optional. Newer typed arithmetic may vary across browsers. [S1] [S2]
The question, the details, the next step.
I want a box to fill its available width but leave room for side padding. What can I put inside calc()?
Think of calc() as a way to do arithmetic while keeping the result in a CSS value type the property accepts. For example, a width can use a length-percentage expression:
.panel {
width: calc(100% - 2rem);
}Here, 100% is a percentage and 2rem is a length. A percentage and length can be combined in contexts that accept that mixed type, including width. The final result still has to be valid for the property. [S1] [S2]
This expression adjusts the width; it does not set the element’s padding. If you want space inside the box, set padding separately.
Which units count as compatible? Could I, for example, add a length to a time or combine angles?
Compatibility depends on the types of values and on what the property accepts. Lengths can be combined with other lengths, and angles with other angles. A percentage can combine with a length in a context that accepts a length-percentage. But a length plus a time is incompatible—for example, calc(10px + 2s) does not form a valid sum. [S1] [S2]
A typed example for an angle-valued property is:
transform: rotate(calc(1turn + 45deg));Both values represent angles. By contrast, this mixes unlike types:
width: calc(100px + 2s);The fact that two values are written with units does not make them interchangeable. Check the target property’s accepted value type as well as the units in the expression.
Does spacing matter inside the expression? I’ve seen examples written with operators close to the numbers.
Yes. Put whitespace on both sides of + and -; * and / do not require it. For example:
width: calc(100% - 2rem);
width: calc(100% + 2rem);Do not write calc(100%-2rem) or calc(100%+2rem) as substitutes: they lack the required spaces around addition and subtraction. [S1] [S2]
For multiplication or division, whitespace is optional, but the resulting value still needs to be valid for the property. Parentheses can help make the intended grouping clear when an expression has several operations. [S2]
Can you give me a quick way to review a calc() expression before I use it?
Use this short check:
- Identify the property and the kind of value it accepts.
- Check that additions and subtractions use compatible types; a length plus a time is not valid.
- Add spaces on both sides of
+and-. - Confirm the completed expression produces a value valid for the property.
- If you rely on newer typed arithmetic, check that it suits the browsers you need to support; support may vary. [S1] [S2]
For width: calc(100% - 2rem), check that the property accepts the percentage-and-length combination and that the minus sign has spaces around it. Those checks address the expression’s types and syntax, but do not determine the layout of a particular page.
A practical checklist
Name the CSS property and check which value type it accepts.
Combine only compatible types; do not add a length to a time.
Use spaces on both sides of
+and-.Check that the completed expression produces a value valid for the property.
Check newer typed arithmetic against the browsers you need to support.
A few more useful answers
Can calc() add a percentage to a length?
Do multiplication and division need spaces?
Sources
References used for this guide.
- [S1] MDN: calc() CSS function reference developer.mozilla.org · Checked
- [S2] W3C CSS Values and Units Module Level 4: Mathematical Expressions w3.org · Checked