CSS math functions evaluate arithmetic and value relationships directly in style declarations. Use them when the browser can determine a layout, size, space, transform, typographic, or simple animation value at render time; use JavaScript math for interaction-driven or complex real-time behavior. section 1.5 section 3.2
Arithmetic must be passed to a math function such as calc(), not written directly as a property value. Addition and subtraction require whitespace; operands must use compatible units; multiplication and division require a scalar operand, with the divisor on the right. Parentheses control evaluation order. section 3.2.1
Table 3.1 CSS arithmetic operators
| Operator |
Name |
Example |
Result |
| + |
Addition |
|
|
| − |
Subtraction |
|
|
| * |
Multiplication |
|
|
| / |
Division |
|
|
Use the operator table to check the four arithmetic operations and their resulting values before composing a calc() expression. section 3.2.1
Leave space around a responsive dialog
A dialog can fill the viewport while preserving a 40px margin: width: calc(100vw - 40px); and max-height: calc(100vh - 40px);. The browser re-evaluates the result whenever viewport dimensions change, so the available space stays current. section 3.2.2
For fluid behavior, express a preferred value and its limits. calc(2vw + 1rem) combines viewport growth with a base size; min() caps a value, max() establishes a floor, and clamp(min, preferred, max) keeps a scaling value within both bounds. These relationships avoid abrupt breakpoint-driven changes in layouts and type. section 6.5.1 section 8.2.2
When a calculation fails, inspect whitespace around + or -, unit compatibility, parentheses, CSS variable values, and the property’s computed value in browser devtools. A syntax error generally causes the browser to ignore the expression and fall back to the property’s default or inherited value. section 3.2.2
