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.
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.
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.Test it Now
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 unitsTest it Now
Let's see another example in which we will use nested calc() function.
Example3- nested calc() functionTest it Now