Skip to content

The CSS calc() function

Learn how to work with the CSS calc() function

THE AHA STACK MASTERCLASS

Now open with 50% off launch discount!

The calc() function lets you perform basic math operations on values, and it’s especially useful when you need to add or subtract a length value from a percentage.

This is how it works:

div {
	max-width: calc(80% - 100px)
}

It returns a length value, so it can be used anywhere you expect a pixel value.

You can perform

One caveat: with addition and subtraction, the space around the operator is mandatory, otherwise it does not work as expected.

Examples:

div {
	max-width: calc(50% / 3)
}
div {
	max-width: calc(50% + 3px)
}

→ Get my CSS Handbook

I wrote 20 books to help you become a better developer:

  • Astro Handbook
  • HTML Handbook
  • Next.js Pages Router Handbook
  • Alpine.js Handbook
  • HTMX Handbook
  • TypeScript Handbook
  • React Handbook
  • SQL Handbook
  • Git Cheat Sheet
  • Laravel Handbook
  • Express Handbook
  • Swift Handbook
  • Go Handbook
  • PHP Handbook
  • Python Handbook
  • Linux Commands Handbook
  • C Handbook
  • JavaScript Handbook
  • CSS Handbook
  • Node.js Handbook
...download them all now!

Related posts that talk about css: