It's a built-in CSS feature that enables us to conduct computations. This function is handy for determining various values like length, percentage, time, number, integer frequency, or angle. It employs basic arithmetic operators such as addition (+), multiplication (*), subtraction (-), and division (/).
It is a robust CSS concept as it enables the combination of various units, like percentages and pixels.
Syntax
calc( Expression );
Values
This CSS function accepts a sole parameter expression, where the output of this mathematical calculation will be applied as a value. The expression must consist of a basic arithmetic operation involving the four fundamental operators (+, -, *, /). Defining the expression is a compulsory requirement.
ImportanC# Tutorials
- 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 instance, we are employing the calc function to specify the dimensions of the div container. The calc function involves subtracting values with identical units within its expression.
The outcome of the expression will be considered as the value assigned to the property. Consequently, the width will be set to 75% and the height will be specified as 275px.
<!DOCTYPE html>
<html>
<head>
<title> calc() function </title>
<style>
.jtp {
width: calc(150% - 75%);
height: calc(350px - 75px);
background-color: lightblue;
padding-top: 50px;
}
.jtp1 {
font-size: 30px;
font-weight: bold;
color: blue;
}
h1 {
color: blue;
}
h2{
color: green;
}
</style>
</head>
<body>
<center>
<div class = "jtp">
<div class = "jtp1"> Welcome to the C# Tutorial </div>
<h1> This is an example of calc() Function </h1>
<h2> width: calc(150% - 75%); </h2>
<h2> height: calc(350px - 75px); </h2>
</div>
</center>
</body>
</html>
In the previous instance, it is feasible to specify the dimensions of height and width explicitly. Even though the measurements in the prior scenario share the same units, complications arise when dealing with diverse units, making it challenging to input values directly.
Now, we will explore another example where we utilize a combination of different units.
Example2- use of mix units
<!DOCTYPE html>
<html>
<head>
<title> calc() function </title>
<style>
.jtp {
width: calc(40% + 10em);
height: calc(350px + 75px);
background-color: lightblue;
padding-top: calc(10% - 10px);
padding-left: calc(10% + 10px);
}
.jtp1 {
font-size: 30px;
font-weight: bold;
color: blue;
}
h1 {
color: blue;
}
h2{
color: green;
}
</style>
</head>
<body>
<div class = "jtp">
<div class = "jtp1"> Welcome to the C# Tutorial </div>
<h1> This is an example of calc() Function </h1>
<h2> width: calc(40% + 10em); </h2>
<h2> height: calc(350px + 75px); </h2>
<h2> padding-top: calc(10% - 10px); </h2>
<h2> padding-left: calc(10% + 10px); </h2>
</div>
</body>
</html>
Let's explore another instance where we will employ a nested calc function.
Example3- nested calc function
<!DOCTYPE html>
<html>
<head>
<title> calc() function </title>
<style>
.jtp {
width: calc( calc(40em / 3) * 2);
height: calc(350px + 75px);
background-color: lightblue;
}
.jtp1 {
font-size: 30px;
font-weight: bold;
color: blue;
}
h1 {
color: blue;
}
h2{
color: green;
}
</style>
</head>
<body>
<div class = "jtp">
<div class = "jtp1"> Welcome to the C# Tutorial </div>
<h1> This is an example of nested calc() Function </h1>
<h2> width: calc( calc(40em / 3) * 2); </h2>
<h2> height: calc(350px + 75px); </h2>
</div>
</body>
</html>