CSS | calc() Function
The calc() function is an inbuilt function in CSS which is used to perform calculations based on CSS property.
Syntax:
calc( Expression )
Parameters: This function accepts single parameter Expression which is mandatory. This parameter contains mathematical expression which need to implement. The operators used by this parameters are: +, -, *, /
Below program illustrates the calc() function in CSS:
Program:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
html
<!DOCTYPE html><html> <head> <title>calc function</title> <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> </head> <body> <div class = "geeks"> <div class = "gfg">GeeksforGeeks</div> <h1>The calc() Function</h1> </div> </body></html> |
Output:
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
