What is calc() function in CSS ?

Explanation:
calc() function used to perform the calculation with specifying CSS property values. It can be used in length, frequency, time, and so on.
Syntax:
There are many syntax to define calc() function but the most popular is
calc() where = [ ‘+’ or ‘-’ ]
For more explanation look at this bellow example
HTML code:
<div id="ball">Soham</div>

CSS code :

#ball{
display:block;
margin:0 auto;
position:absolute;
width:calc(100% - 50px);
padding:10px;
text-align:center;
border:2px solid black;
background:red;
box-shadow:3px 3px 3px #000;
transition:1.5s;}

Output:

CSS code explanation:
Here I make a div which id is #ball. For styling the component add
border of 2px solid with black color
add padding 10px
For center the text add text-align: center
Now lets understand
width: calc(100% — 50px)
Above calc() property define that #ball element width 100% and have 50px padding from both side left and right
Now when hover on this #ball div it’s background color became yellow and width:calc(90% — 50%)
Code:
#ball:hover{
width:calc(90% - 50%);
background:yellow;
}
Output:

Here its width becomes 90% or less and 50% padding from both sides
Important Note:
calc(90% — 50%) you must give whitespace between 90% and 50% otherwise property does not work
For * and / operator whitespace optional

You can visit my code pen for full Code
👉https://codepen.io/Soham23/pen/oNGbBOb