calc() CSS Function

Description

The calc() CSS function is used to indicate the calculated value of properties that use size, angle, time or number as values. This allows you to set values ​​based on addition (+), subtraction (-), multiplication (*), and division (/) of different units of measurement, for example, you can set 100% - 20px. If the value cannot be calculated, it is ignored.

Syntax

<calc()> = calc( <calc-sum> )
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ] *
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <calc-number-value> ] *
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )
<calc-number-sum> = <calc-number-product> [ [ '+' | '-' ] <calc-number-product> ] *
<calc-number-product> = <calc-number-value> [ '*' <calc-number-value> | '/' <calc-number-value> ] *
<calc-number-value> = <number> | ( <calc-number-sum> )

Values

• +addition (width: calc (20px + 20px));
• -subtraction (padding: calc (10% - 10px););
• *multiplication (height: calc (20% * 2);)
• /division. It is forbidden to divide by zero (width: calc (100% / 3);)

Example

<div class="boxcalc">Example using the calc() CSS function.</div>

.boxcalc {

  width: calc(100% - 100px);

  border: 2px solid red;

  background-color: #ccc;

  padding: 10px;

  text-align: center;

}

Browser Support

Desktop
9	12	26	16	15	7
Tablets / Mobile
≤37	28	16	14	7	Yes

Last updated by CSSPortal on: 1st December 2019