CSS Function - calc()

The CSS function calc() allows values to be calculated when defining CSS properties. It is applicable to the values <length>, <frequency>, <angle>, <time>, <percentage>, <number> or <integer>.

The function calc() accepts a single expression as parameter and the result of this expression is used as value.

The expression may consist of different operators, and follow the standard rule for operator precedence.

  • + Addition.

  • - Subtraction

  • * Multiplication. At least one of the arguments must be a <number>.

  • / Division. The right-hand side must be a <number>.

Points to remember:

  • The + and - operators within calc() must be separated by spaces to avoid confusion.

  • The * and / operators in calc() do not require a space, although it is advisable to include it for consistency.

  • Mathematical expressions with percentages for widths and heights on the table columns, column groups, rows, row groups, and cells in both auto and fixed layout tables may be treated as if auto has been specified.

  • Nesting of calc() functions is allowed, treating the inner functions as simple parentheses.

  • The calc() function cannot directly replace numeric values with percentage values.

  • In the case of lengths, you cannot use 0 to represent 0px or any other length unit. It is necessary to specify the unit version.

Syntax

calc( <calc-sum> )

Usage with Integers

When calc() is used in a context where a <integer> is expected, the value is rounded to the nearest integer. For example

.modal {
   z-index: calc(6 / 4);
}

This will give .modal a final z-index value of 2.

CSS calc() - Positioning An Object

The following example demonstrates the usage of calc(). calc() is used to calculate the box's height and width, resulting in a responsive layout with a constant 50px margin all around the box.

<html>
<head>
<style>
   .container {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }   
   .box {
      width: calc(100% - 99px);
      height: calc(100% - 99px);
      margin: 50px;
      background-color: gray;
      text-align: center;
    }
</style>
</head>
<body>
   <div class="container">
      <div class="box">
         <h2>This is an example of calc()</h2>
      </div>
   </div>
</body>
</html>

CSS calc() - Automatic Sizing Of Form Fields.

Calc() can also be used to ensure that form fields fit into the available space without extending beyond the edge of their container, while maintaining a reasonable margin.

The following examples shows sizing of form fields using calc()

<html>
<head>
<style>
   form {
      display: flex;
      flex-direction: column;
      align-items: center;
         background-color: lightblue;
   }
   input[type="text"], textarea {
      width: calc(100% - 50px);
      padding: 10px;
      margin: 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
      resize: none;
   }
   input[type="submit"] {
      padding: 10px 20px;
      margin: 10px;
      border-radius: 5px;
      border: none;
      background-color: #4CAF50;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
   }
</style>
</head>
<body>
   <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" placeholder="Enter your name">
      <label for="email">Email:</label>
      <input type="text" id="email" name="email" placeholder="Enter your email">
      <label for="message">Message:</label>
      <textarea id="message" name="message" placeholder="Enter your message"></textarea>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

CSS calc() - Nesting of calc() With CSS Variables

The calc() can be utilized in conjunction with CSS variables as well. The following examples shows calc() with CSS variables

<html>
<head>
<style>
   :root {
      --width: 200px;
      --padding: 20px;
   }
   .container {
      width: calc(var(--width) + var(--padding));
      background-color: lightgray;
      padding: var(--padding);
   }
   .box {
      width: calc(var(--width) / 2);
      height: calc(var(--width) / 2);
      background-color: black;
      margin: 0 auto;
   }
</style>
</head>
<body>
   <div class="container">
   <div class="box"></div>
</div>
</body>
</html>
Advertisements