Explain the working of calc() function in CSS

Last Updated : 18 Jun, 2024

The calc() function in CSS allows for dynamic calculations within property values, combining different units and mathematical operations. It enhances flexibility and responsiveness in layouts by enabling precise control over dimensions and spacing.

Working of calc() function

The calc() function in CSS performs calculations based on user-defined expressions, allowing for dynamic values in properties. It supports addition, subtraction, multiplication, and division, enhancing flexibility in responsive design.

Syntax

selector{
  property-name: calc(Expression)
}

Parameters

The calc() function accepts a mandatory single parameter expression. The value passed must contain a mathematical expression.

The basic mathematical operators that can be used in the expression are as follows.

Operator	Description
`+`	Addition
`-`	Subtraction
`*`	Multiplication (One operand must be a number)
`/`	Division (Right-hand side must be a number)

We can use different units for each value in the expression.

Syntax Technicalities

The operator are to be surrounded by whitespaces. Using whitespaces with (*) and (/) are optional but recommended. like calc(80% -10px) will result in error , the correct way is calc(80% – 10px).
HTML parser generates an error if we divide by zero.
Nesting of calc() is allowed, the inner calc() can be treated simply a parentheses.

Working:

Calculations made by the calc() function of CSS are based on the values provided by the user during the calculation. If it is not provided the calculation is done based on the values of their parent element.

Example 1: In the below example, the height to the container is set to 1/3 of 100% of viewport height, and width is set to 1/2 of 80% of the viewport width. The exact value in units is unknown. We use calc() which will provide the desired height and width to the container.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Using Calc</title>
    <style>
        .container {
            height: calc(100vh / 3);
            width: calc(80vw / 2);
            background-color: green;
            font-family: cursive;
            color: white;
            text-align: center;
            font-size: 2.3rem;
            margin: auto;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="container">
        GeeksforGeeks
    </div>
</body>

</html>

Output:

Example 2: In the below example, we have two containers, a parent container, and its child container. The exact values for height and width for the parent container are known. We want to calculate height and width relative to the parent container. So use calc() to easily specify the desired height and width to the child container.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Using Calc</title>
    <style>
        * {
            box-sizing: border-box;
        }
        
        .parent {
            height: 12rem;
            width: 25rem;
            background-color: #a29bfe;
            margin: auto;
        }
        
        .child {
            height: calc(100% / 2);
            width: calc(50% - 20px);
            background-color: green;
            color: white;
            text-align: center;
            font-family: cursive;
            font-size: 1.2rem;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child">GeeksforGeeks</div>
    </div>

</body>

</html>

Output:

Conclusion

The calc() function in CSS allows for dynamic and flexible design by enabling calculations within CSS property values. This function can combine different units and perform mathematical operations, making it a versatile tool for responsive web design.

ES6 Spread Operator

siddharthredhu01

Improve

Article Tags :

Explain the working of calc() function in CSS

Working of calc() function

Syntax

Parameters

Syntax Technicalities

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?