css calc function

CSS Calc() — Do Math in Your Styles

by

Need flexible sizing without hardcoding everything? The CSS calc() function lets you do simple math right inside your stylesheets — no extra tools needed! With calc(), you can mix units, combine percentages and pixels, or adjust spacing dynamically. It’s perfect for building fluid layouts, responsive components, or fine-tuning tricky gaps. In this MiniCoursey quick guide, you’ll learn how to use calc(), see common use cases, and get tips to keep your math smooth and your CSS clean.

What is CSS Calc()?

The calc() function performs calculations on the fly in your CSS. You can add, subtract, multiply, or divide values — even mix units that normally can’t be combined directly.

Basic Syntax

The syntax is straightforward: put your math inside calc(). Make sure to include spaces around operators!


.container {
  width: calc(100% – 200px);
}

This means the container will always be 100% wide minus 200 pixels — super handy for sidebars or split layouts.

Common Use Cases

  • Mix fluid and fixed units: width: calc(50% - 20px);
  • Create equal gaps in flexible grids.
  • Adjust positioning or spacing for sticky headers or footers.

.main {
  padding-top: calc(60px + 1rem);
}

💡 Pro Tip: Always use spaces inside calc(). calc(100%-20px) won’t work — it must be calc(100% - 20px)!

⚠️ Common Mistake: Don’t overuse calc for simple static sizes — it’s most useful for mixing units or dynamic layouts.

FAQ

Q: Can I nest calc()?
A: Nope — you can’t put calc() inside another calc(). But you can use multiple calc() functions for different properties.

Q: Does calc work in all browsers?
A: Yes — modern browsers fully support calc().

Related Link

👉 Check out previous: CSS Variables — Cascade and Inheritance

Where to Learn More

Try mixing percentages and rems to build flexible layouts. MDN’s calc() docs have clear examples and advanced tips.

Conclusion

Congrats — you now know how to do math in your CSS! calc() keeps your designs flexible, responsive, and easy to maintain.

✨ Bookmark MiniCoursey for more quick & free mini courses!

Leave a Comment