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

  • additions using +
  • subtractions using -
  • multiplication using *
  • division using /

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)
}

Download my free CSS book!

Did you know?

I have 7 premium training programs that will transform you, quickly, into an excellent Node/React/JS/Vue/Next.js/Svelte developer. Choose your own adventure. Practical lessons to learn the 80% of the things that you need to know, in 20% of the time!

⬇️ ⬇️ ⬇️

Check out all my courses now!

⬆️ ⬆️ ⬆️