The CSS calc() function is used to perform mathematical calculations to determine property values. It allows combining different units such as pixels, percentages, ems, and rems in a single expression, making layouts more flexible and responsive.
- Performs mathematical operations such as addition (+), subtraction (-), multiplication (*), and division (/).
- Allows combining different CSS units in a single calculation.
- Commonly used for responsive layouts, spacing, sizing, and positioning.
Syntax:
calc( Expression )Parameter:
- expression: A mathematical expression used to calculate a CSS value. It can contain numbers, units, and the operators +, -, *, and /.
Operators:
- + : Adds values.
- - : Subtracts values.
- * : Multiplies values.
- / : Divides values.
Example: Illustrates the calc() function in CSS
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>calc function</title>
<!--Driver Code Ends-->
<style>
.geeks {
position: absolute;
left: 50px;
width: calc(100% - 20%);
height: calc(500px - 300px);
background-color: green;
padding-top: 30px;
text-align: center;
}
.gfg {
font-size: 40px;
font-weight: bold;
color: white
}
h1 {
color: white;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="geeks">
<div class="gfg">GeeksforGeeks</div>
<h1>The calc() Function</h1>
</div>
</body>
</html>
<!--Driver Code Ends-->
Understanding the working of the calc() function in CSS
The calc() function in CSS does calculations based on the values of their parent element or the values provided by the user during the calculation.
Let's understand the work in more depth using some examples:
Example 1: The calc() function sets the heading width to 50% of its parent element's width minus 100 pixels, combining relative and fixed values in a single calculation.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=">
<title>Calc Function</title>
<!--Driver Code Ends-->
<style>
.parent{
background-color: skyblue;
}
.heading {
left: 30px;
width: calc(50% - 100px);
height: 100px;
background-color: #579dcf;
padding-top: 20px;
text-align: center;
}
h2 {
color: #e9e8e9;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<br>
<div class="parent">
<div class="heading">
<h2>
Welcome to GEEKSFORGEEKS.
</h2>
</div>
</div>
</body>
</html>
<!--Driver Code Ends-->
- The calc() function is used to set the width of the heading dynamically.
- 50% represents half of the parent element's width, while 100px is a fixed value.
- calc(50% - 100px) sets the heading width to 50% of the parent width minus 100 pixels, combining a relative value with a constant value.
Example 2: The calc() function combines percentage and fixed values to set responsive widths for the parent container and heading.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=">
<title>Calc Function</title>
<!--Driver Code Ends-->
<style>
.parent{
background-color: skyblue;
width: calc(80% - 2em);
}
.heading {
left: 30px;
width: calc(50% - 100px);
height: 100px;
background-color: #579dcf;
padding-top: 20px;
text-align: center;
}
h2 {
color: #e9e8e9;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<br>
<div class="parent">
<div class="heading">
<h2>
Welcome to GEEKSFORGEEKS.
</h2>
</div>
</div>
</body>
</html>
<!--Driver Code Ends-->