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:
<!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:
leave a comment
0 Comments