CSS calc()

The calc() function performs a calculation to be used as the property value(length, percentage, time, number, integer frequency, or angle).

Example:

<!DOCTYPE html> 
<html>
  <head>
    <title> calc() function </title>
    <style>
      .cal{                                  
         width: calc(40% + 10em);
         height: calc(350px + 75px);
         background-color: pink;
         padding-top: calc(10% - 10px);
      padding-left: calc(10% + 10px);
       }
       h1 {
         color: red;
       }
     h2{
     color: black;
     }
      </style>
    </head>
    <body>

      <div class = "cal">
        <h1> calc() Function </h1>
     <h2> width: calc(40% + 10em); </h2>
        <h2> height: calc(350px + 75px); </h2>
      <h2> padding-top: calc(10% - 10px); </h2>
      <h2> padding-left: calc(10% + 10px); </h2>

                               
      </div>

  </body>
</html>

OUTPUT:

CSS calc()