CSS calc() Syntax Error
The calc() function requires spaces around + and - operators: calc(100% - 20px) works, calc(100%-20px) does not. This is the most common calc() mistake. Multiplication and division don't require spaces but it's good practice to include them.
Why It Matters
A malformed calc() expression invalidates the entire property value. The browser falls back to the inherited or initial value, which often causes major layout breakage.
Code Examples
div {
width: calc(100%-20px); /* missing spaces around - */
height: calc(100vh -50px); /* space only on one side */
padding: calc(2rem + ); /* incomplete expression */
margin: calc(10px + 20px + ); /* trailing operator */
}div {
width: calc(100% - 20px);
height: calc(100vh - 50px);
padding: 2rem;
margin: calc(10px + 20px);
}How to Fix
- 1Always put spaces around + and - in calc(): calc(100% - 20px) not calc(100%-20px).
- 2You can mix units: calc(100vh - 80px), calc(50% + 2rem).
- 3Nesting works: calc(calc(100% - 40px) / 2), but prefer simpler expressions.
- 4If calc() seems broken, check for missing spaces first. It's almost always that.
Check Your CSS Now
Our CSS validator detects this error automatically and shows the exact line number.
Open CSS ValidatorHostinger — Fast & Affordable Web Hosting
Deploy clean, validated CSS on reliable hosting.
Related CSS Errors
Missing Unit on CSS Value
Why CSS values need units and when they don't. Fix missing px, rem, em, and other unit errors.
Invalid CSS Property Value
Learn why CSS property values are invalid and how to fix them. Common mistakes with colors, units, and keywords.
Missing Semicolon in CSS
Why missing semicolons break CSS rules and how to find them. The most common CSS syntax error.