Understanding calc() in CSS
The calc() function in CSS allows you to perform basic math operations directly inside your styles. This is powerful because it lets you combine different units (like % and px) in a single calculation.
Why use calc()?
- To create responsive layouts that mix percentages and fixed values.
- To avoid hardcoding values when you need dynamic sizing.
- To make designs more flexible and maintainable.
Supported Operations
- Addition (+)
Code Block Loading...
- Subtraction (-)
Code Block Loading...
- Multiplication ()*
Code Block Loading...
- Division (/)
Code Block Loading...
Important Rule: For addition and subtraction, you must include spaces around the operator.
calc(50% - 20px)(work)
calc(50%-20px) (won’t work correctly)