CSS calc() function

Learn how to use the CSS calc() function

Thiscalc()Functions allow you to perform basic mathematical operations on values, which is especially useful when you need to add or subtract length values from percentages.

It works like this:

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

It returns a length value, so it can be used wherever the pixel value is expected.

You can perform

  • Use additional+
  • Subtractive use-
  • Multiplication use*
  • Division use/

One caveat: the space around the addition and subtraction operators is mandatory, otherwise it will not work as expected.

example:

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

Download mine for freeCSS Manual


More CSS tutorials: