CSS calc()

It is an inbuilt CSS function which allows us to perform calculations. It can be used to calculate length, percentage, time, number, integer frequency, or angle. It uses the four simple arithmetic operators add (+), multiply (*), subtract (-), and divide (/).

It is a powerful CSS concept because it allows us to mix any units, such as percentage and pixel.

Syntax

Values

This CSS function takes a single parameter expression, and the result of this mathematical expression will be used as a value. It can be any simple expression using the four arithmetic operators (+, -, *, /). The expression is mandatory to define.

Important points

• The arithmetic operators add (+) and subtract (-) should always be surrounded by whitespace. Otherwise, the expression will be treated as an invalid expression. As an example, calc(60%-4px) will be invalid because it is parsed as a percentage, followed by a negative length. On the other hand, the expression calc(60% - 4px) will be parsed as a subtraction operator and a length.
• Although the operators * and / does not requires whitespace, but it is recommended to add it for consistency.
• Nesting of calc() function can be possible.

Example1- simple example

In this example, we are using the calc() function to define the width and height of the div element. There is the subtraction in the expression of calc() function with same units.

The result of the expression will be treated as the value of the property, so, the value of width will be 75% and the value of height will be 275px.

In the above example, we can directly mention the values of height and width. Although the expression in the above example has the same units, what happens when the units are different, then it will be hard to write the values directly.

Now, we will see another demonstration in which we use mixed units.

Example2- use of mix units

Let's see another example in which we will use nested calc() function.

Example3- nested calc() function