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 Handbook
More css tutorials:
- Styling HTML Tables with CSS
- How to center an element with CSS
- CSS Filters
- Responsive pre tags in CSS
- How to invert colors using CSS
- How to print your HTML with style
- How to apply padding to multiple lines in CSS
- CSS Typography
- The CSS z-index property