How to use the “calc” Function in CSS ?
Last Updated :
31 Jan, 2024
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.
Share your thoughts in the comments
Please Login to comment...