CSS <calc-sum> Data Type
The CSS <calc-sum> data type represents a mathematical expression containing one or more calculation products combined with addition or subtraction operators. It forms part of the grammar used by CSS math functions such as calc(), min(), max(), and clamp().
Syntax
A <calc-sum> consists of one or more <calc-product> values separated by + or - operators:
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*A <calc-product> can contain values combined using multiplication or division, allowing a <calc-sum> to represent more complex mathematical expressions.
Addition and Subtraction
The + and - operators combine compatible values within a calculation. For example, lengths can be added to or subtracted from other lengths, including values that use different length units.
calc(100% - 40px)
calc(50vw + 2rem)
calc(100px + 25px - 10px)The + and - operators must be surrounded by whitespace. For example, calc(100% - 40px) is valid, while calc(100%-40px) is not interpreted as the same calculation.
Nested Calculations
Calculation expressions can contain nested calculations. Parentheses can group parts of an expression so they are evaluated together before being combined with the rest of the calculation.
calc((100% - 40px) / 2)
calc(100px + (20px * 2))CSS math expressions follow defined operator precedence. Multiplication and division are evaluated before addition and subtraction unless parentheses change the grouping.
<calc-sum> Example
The following example subtracts 80 pixels from the available width. The resulting width is calculated by the browser:
.example {
width: calc(100% - 80px);
}Specifications
The <calc-sum> data type is defined as part of CSS mathematical expressions in the CSS Values and Units Module Level 4 .