calc() function

Learn mathematical calculations with calc().

What is calc()?

The calc() function combines different units with math. Write width: calc(100% - 4rem) and the browser computes the percentage and the rem together.

Operators are + - * /. For addition and subtraction, spaces around the operator are required; for multiplication and division, units are used carefully.

Operators and spaces

Inside calc(), + and - must be wrapped in spaces. calc(100% - 32px) is correct; calc(100%-32px) is wrong.

For multiplication and division one side must be a unitless number: calc(2rem * 3) or calc(100% / 4). Multiplying two lengths is invalid.

Multiplication and division

With calc() you can multiply a length by a number or divide a length by a number. calc(1.5rem * 2) gives 3rem; calc(100% / 3) is handy for three equal columns.

The number must be unitless; you cannot multiply two lengths. Even with rounding, the browser turns the result into pixels.

Exercise calc for a panel

Write a .panel selector. Set its width to calc(100% - 4rem) and its padding to calc(1rem + 8px).

Show example solution

/* add the panel section */
.panel {
  width: calc(100% - 4rem);
  padding: calc(1rem + 8px);
}

Test yourself

Which calc() writing is valid?
```
/* spaces are required around + and - */
```
- calc(100% - 50)
- calc(100% -50px)
- calc(100%-50px)
- calc(100% - 50px)
Show answer

calc(100% - 50px) — Correct. + and - need spaces around them: calc(100% - 50px).

Width with calc

.panel {
  width: calc(____ - 2rem);
}

Show answer

.panel {
  width: calc(100% - 2rem);
}

Match each operator to its meaning

+

Addition
-

Subtraction
*

Multiplication
/

Division

Next lesson: Color functions

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies