The CSS calc() function can be used to perform calculations to determine property values. These calculations can involve length, frequency, angles, time, percentage, or even numbers. It’s useful for mixing units, like percentage and pixels.
Here’s how to use it:
```
element{
property: calc(expression);
}
```
Below is an example of a CSS calc() function that is using for width property:
```
div {
width: calc(100% – 80px);
}
```
This will set the width of a div to be the full width of its container minus 80px.
Calc() can also be used for dynamic sizing. For example, to keep a gap of 50px between two divs while resizing the browser window:
```
#left {
width: calc(50% – 25px);
}
#right {
width: calc(50% – 25px);
}
```
In this example, the width of each div will be 50% of the viewport width minus 25px, thus maintaining a 50px gap in between.
If you want to use it with an operation of multiplication or division, you will need to make it a product of the number and the unit in the second argument :
```
div {
font-size: calc(16px * 1.5); /* multiplies the 16px by 1.5 */
height: calc(100px / 2); /* divides the 100px by 2 */
}
```
Do keep in mind that there must be spaces wrapping the + and – operators in the function. However, spaces around \*, /, and % are optional.
Also note that the CSS calc() function doesn’t work in Internet Explorer 8 and earlier versions.
