The calc() Function

Use an expression anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is required. This allows calculations to be performed to determine CSS property values.

Syntax for calc()

	Syntax
CSS	calc( <calc-sum> ), where <calc-sum> = "<calc-product> [ [ '+' | '-' ] <calc-product> ]*", <calc-product> = "<calc-value> [ '*' <calc-value> | '/' <calc-number-value> ]*", and <calc-value> = "<number> | <dimension> | <percentage> | ( <calc-sum> )"

Notes

• Note that the '+' and '-' operators must always be surrounded by whitespace, while the '*' and '/' operators do not require whitespace (but it is recommended for consistency).

Recommended Links

• CanIUse.com: Search "calc()" (compatibility information)
• CanIEmail.com: Search "calc()" (email client compatibility information)
• CSS Values and Units Level 3: calc()
• MDN: calc()

Search Engine Links (for more information)

• Bing "CSS calc function"
• Google "CSS calc function"