<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.
+
-
Adds two numbers together.
-
-
Subtracts the right number from the left.
Formal syntax
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-constant> |
( <calc-sum> )
<calc-constant> =
e |
pi |
infinity |
-infinity |
NaN
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
Description
The operands in the expression may be any <length>
syntax value. You can use <length>
, <frequency>
, <angle>
, <time>
, <percentage>
, <number>
, or <integer>
.
Different unit types can be used in a single expression. For example, subtracting px
from %
, as in calc(100% - 10px)
, is a valid expression.
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 — 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
BCD tables only load in the browser