<calc-sum>
The <calc-sum>
CSS data type represents an expression which performs a calculation in any CSS math function. The expression executes a basic arithmetic operation of addition and subtraction between two values.
Syntax
The <calc-sum>
type defines two numeric values and one of the following arithmetic operators between them.
Formal syntax
Description
The operands in the expression may be any <length>
syntax value. You can use <length>
, <frequency>
, <angle>
, <time>
, <percentage>
, <number>
, or <integer>
.
The two operands' types must be consistent. For lengths, you can't use 0
to mean 0px
(or another length unit). Instead, you must add an explicit unit: margin-top: calc(0px + 20px);
is valid, while margin-top: calc(0 + 20px);
is invalid. Percentage value types are resolved based on the context. For example, margin-top: calc(50% + 20px);
is valid because margin-top
resolves percentages to lengths.
Including CSS variables in calc-sum
expressions is also allowed. The following code calc(10px + var(--variable))
, is a valid expression.
The +
and -
operators must be surrounded by whitespace. For instance, calc(50% -8px)
will be parsed as "a percentage followed by a negative length" — which is an invalid expression — while calc(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".
Specifications
No specification found
No specification data found for css.types.calc-sum
.
Check for problems with this page or contribute a missing spec_url
to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.
Browser compatibility
No compatibility data found for css.types.calc-sum
.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.