CSS Data Type - <calc-sum>

CSS <calc-sum> data type defines an expression that allows you to perform calculations using any math function. The expression performs addition and subtraction of two values.

Possible Values

<calc-sum> type uses one of the following arithmetic operators between two numeric values.

  • + Performs the addition operation on two numbers.

  • - Subtracts second number from the first one.

Syntax

calc() = + | -;

Points to be remembered

  • The operands in the expression can be any <length> syntax value. You can specify <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer>.

  • You can combine different units in one expression, such as subtracting px from %. For example, calc(50% - 30px) is valid.

  • Include CSS variables in your calculations, such as calc(20px + var(--variable)).

  • Add spaces around + and - operators. Valid expression - calc(40% - 30px), invlid expression - calc(40%-30px).

CSS cal() - Addition (+)

The following example demonstrates that the calc() function calculates the total height of an element by adding 20% of the height of an element and 50px −

<html>
<head>
<style>
   div {
      position: absolute;
      height: calc(20% + 50px);
      border: 2px solid blue;
      background-color: pink;
      padding: 5px;
      box-sizing: border-box;
   }
</style>
</head>
<body>
   <div>Addition opeartion calc(20% + 50px) on height.</div>
</body>
</html>

CSS cal() - Subtraction (-)

The following example demonstrates that the calc() function is used to calculate the total width, which in turn is calculated by subtracting 50% of the element width from 200px −

<html>
<head>
<style>
   div {
      position: absolute;
      width: calc(50% - 200px);
      border: 2px solid blue;
      background-color: pink;
      padding: 5px;
      box-sizing: border-box;
   }
</style>
</head>
<body>
   <div>Perform subtraction using calc(50% - 200px) function on width.</div>
</body>
</html>
Advertisements