In the HTML webpage, when applying values to the CSS properties, the calculations are performed by using calc() function.
Syntax:
element {
// CSS property
property : calc( expression)
}
Properties: The calc() function takes parameters in the form of a single expression. The value becomes the result of the expression. Even the expression be the combination of many operators follow the standard precedence rules.
- + Addition
- – Subtraction
- * Multiplication. Any of the arguments should be a number
- / Division. The right-hand side should be a number
One must be careful while writing the syntax and must take care of the following points.
- The + and – operator must be surrounded by white space i.e. height(100%-30px) is considered to be invalid but height(100% – 30px) is a valid expression. For the / and * operator, the white spacing is not necessary but is highly recommended.
- Division by 0 results in an error.
Example 1:
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< title >
CSS Calc Viewport Units Workaround
</ title >
< style >
body {
background-color: rgb(30, 240, 30);
}
h1 {
color: rgb(30, 240, 30);
}
div {
width: calc(100% - 100px);
/* Using the calc() func to change the
width of the div element by 100px */
border: 1px solid black;
background-color: white;
margin-top: 50px;
text-align: center;
}
</ style >
</ head >
< body >
< div >
< h1 >working of the calc() function</ h1 >
</ div >
</ body >
</ html >
|
output:

Example 2:
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< title >
CSS Calc Viewport Units Workaround
</ title >
< style >
body {
background-color: rgb(30, 240, 30);
}
h1 {
color: rgb(30, 240, 30);
/* Using the calc() func to change
the font size of the h1 element */
font-size: calc(1.5rem + 3vw);
}
div {
width: calc(100% - 100px);
border: 1px solid black;
background-color: white;
margin-top: 50px;
text-align: center;
}
</ style >
</ head >
< body >
< div >
< h1 > working of the calc() function</ h1 >
</ div >
</ body >
</ html >
|
Output:

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
30 Jun, 2020
Like Article
Save Article