CSS: calc

By Xah Lee. Date: . Last updated: .

calc() lets you do a simple calculation, for CSS property values.

It can be used anywhere that requires a length or number.

Example:

width: calc(100% - 80px);

you can use any of the following operators:

+
Add. (🛑 WARNING: must have space before and after)
-
Subtract. (🛑 WARNING: must have space before and after)
*
Times. One of the argument must be a number.
/
Divide. The right-hand side must be a number.

Parentheses can be used for grouping.

CSS, Advanced