CSS calc() Function

The calc() function lets you combine different CSS units and perform calculations such as addition, subtraction, multiplication, and division.

Why Use calc()?

• Create flexible layouts.
• Combine different measurement units.
• Reduce hard-coded values.
• Improve responsive design.
• Make CSS easier to maintain.

.container{

    width:calc(100% - 50px);

}

The syntax of the calc() function is simple. It accepts a mathematical expression inside parentheses.

property:calc(expression);

Example

.box{

    width:calc(100% - 20px);

}

The calc() function supports four basic mathematical operators.

.box{

    width:calc(300px / 2);

}

One of the most common uses of calc() is setting responsive widths and heights.

.container{

    width:calc(100% - 40px);

    height:calc(100vh - 80px);

}

The calc() function can also be used for margins and padding to create balanced spacing.

.box{

    margin-left:calc(50px + 2%);

    padding:calc(10px + 1vw);

}

The calc() function works perfectly with viewport units like vw and vh. This helps create layouts that automatically adjust to different screen sizes.

.container{

    width:calc(100vw - 40px);

    height:calc(100vh - 80px);

}

The calc() function is widely used to create responsive page layouts where elements share the available space.

.sidebar{

    width:250px;

}

.content{

    width:calc(100% - 250px);

}

.card{

    width:calc(50% - 20px);

}

Example 1 : Full Screen Section

.hero{

    height:calc(100vh - 70px);

}

Example 2 : Two Equal Columns

.column{

    width:calc(50% - 15px);

}

Example 3 : Responsive Font Size

h1{

    font-size:calc(20px + 2vw);

}

Example 4 : Responsive Padding

.box{

    padding:calc(10px + 1vw);

}

• Creates flexible and responsive layouts.
• Allows different CSS units to work together.
• Reduces the need for JavaScript calculations.
• Makes CSS cleaner and easier to maintain.
• Improves layout accuracy.
• Works with width, height, margin, padding, font-size, and more.

.container{

    width:calc(100% - 40px);

    height:calc(100vh - 60px);

    padding:calc(10px + 1vw);

}

Following best practices helps you write clean, readable, and maintainable CSS while making layouts more flexible.

• Use calc() only when calculations are required.
• Always place spaces around operators (+, -, *, /).
• Combine fixed units and relative units wisely.
• Use calc() for responsive layouts.
• Avoid unnecessarily complex calculations.
• Test layouts on different screen sizes.
• Use comments for complex expressions.
• Keep your CSS simple and easy to maintain.

❌ Incorrect

width:calc(100%-20px);

✔ Correct

width:calc(100% - 20px);

The calc() function is supported by all major modern browsers and is widely used in responsive web design.

1. What is the purpose of the calc() function?
2. Which mathematical operators are supported by calc()?
3. Can calc() combine different CSS units?
4. Why are spaces required around operators?
5. Where is calc() commonly used?
6. Can calc() be used with viewport units?
7. Can you use calc() for font sizes?
8. What are the advantages of calc()?
9. How does calc() help responsive design?
10. Is calc() supported by modern browsers?

In this lesson, you learned:

• ✔ Introduction to calc().
• ✔ Syntax of calc().
• ✔ Arithmetic operators.
• ✔ Width and height calculations.
• ✔ Margin and padding calculations.
• ✔ Viewport unit calculations.
• ✔ Responsive layout examples.
• ✔ Advantages of calc().
• ✔ Best Practices and Common Mistakes.
• ✔ Browser Support and Interview Questions.