How to use the “calc” Function in CSS ?

The calc function in CSS allows you to perform calculations within property values. It is useful for dynamically adjusting sizes, margins, paddings, and other numeric values based on specific calculations.

Note: The calc function can be used with various arithmetic operations.

Syntax

.container {
  width: calc(100% - 20px);
  padding: calc(2em + 10px);
  font-size: calc(16px + 2vmin);
}

Features

• Arithmetic Operations: calc supports basic arithmetic operations like addition, subtraction, multiplication, and division.
• Units: You can perform calculations with different units (e.g., pixels, em, vmin).
• Dynamic Sizing: Useful for creating responsive designs where values depend on dynamic factors.
• Browser Support: Widely supported in modern browsers.