juniorCSS
What is the CSS calc() function?
Updated Apr 28, 2026
Short answer
The calc() function allows you to perform mathematical calculations to determine CSS property values.
Deep explanation
It supports addition, subtraction, multiplication, and division. It is uniquely powerful because it can mix different units (e.g., percentages and pixels) dynamically at runtime, calculating the exact value based on the current layout constraints.
Real-world example
Creating a sidebar layout where the main content area takes up 100% of the screen minus the fixed 250px width of the sidebar.
Common mistakes
- Forgetting to include spaces around the plus (+) and minus (-) operators, which breaks the function (e.g., `calc(100%-50px)` is invalid).
Follow-up questions
- Can you nest calc() functions?