CSS arithmetic operators calculate values inside CSS mathematical expressions. The four operators are addition (+), subtraction (-), multiplication (*), and division (/). CSS accepts these expressions as arguments to math functions such as calc(), rather than directly as property values. section 3.2.1
Use these rules when writing CSS arithmetic:
- Place spaces around addition and subtraction operators; multiplication and division do not require spaces, but spacing improves readability. section 3.2.1
- Mix only compatible units, such as lengths with lengths or angles with angles; do not combine lengths and angles. section 3.2.1
- Keep one operand scalar for multiplication or division; division requires the scalar on the right. section 3.2.1
- Follow parentheses, multiplication or division, then addition or subtraction; use parentheses when a different grouping is needed. section 3.2.1
Responsive width with a subtraction
A declaration such as width: 100% - 2rem; is invalid because the expression is not passed to a CSS math function. Write width: calc(100% - 2rem); instead. The browser subtracts the 2rem gutter from the available width. section 3.2.1
Table 3.1 CSS arithmetic operators
| Operator |
Name |
Example |
Result |
| + |
Addition |
|
|
| − |
Subtraction |
|
|
| * |
Multiplication |
|
|
| / |
Division |
|
|
Compare addition, subtraction, multiplication, and division with CSS values and their resulting values. section 3.2.1
