CSS calc() and Math Functions

Mix units and compute values dynamically with calc(), min(), max(), clamp(), round(), and other CSS math functions.

Overview

`calc()` is a CSS function that lets you perform arithmetic with mixed units something impossible with plain values: ```css width: calc(100% - 2rem); /* 100% minus 32px */ height: calc(100vh - 60px); /* full height minus navbar */ padding: calc(8px + 1vw); /* grows with viewport */ ``` calc() is especially powerful because it mixes unit types: percentages, pixels, rem, vw, etc. **CSS Math Functions (Level 4):** - `min(a, b)` smaller value - `max(a, b)` larger value - `clamp(min, val, max)` clamped between min and max - `round(val, step)` rounds to nearest step - `mod(a, b)` remainder - `abs(a)` absolute value All of these accept any length, percentage, angle, or time value, and can even be nested.

Key Points

•calc() requires spaces around + and - operators: calc(100% - 2rem) not calc(100%-2rem)
•* and / do not require spaces but are recommended for readability
•calc() can mix any CSS length units: px, rem, em, vw, vh, %
•min(100%, 600px) is a concise max-width + width: 100% pattern
•max(16px, 2vw) ensures a minimum font-size even on small screens
•clamp(min, preferred, max) the most versatile of the three
•Nested math: clamp(1rem, calc(0.5rem + 2vw), 2rem)

Examples

Common calc() patterns

/* Take full width minus a sidebar */
.main-content {
  width: calc(100% - 260px);
}

/* Full height minus a fixed header */
.page-body {
  height: calc(100vh - 64px);
  overflow-y: auto;
}

/* Equal thirds with gaps */
.col {
  width: calc((100% - 2 * 16px) / 3);
  /* = (total width - two gaps) divided by 3 columns */
}

IMPORTANT: always put spaces around + and - in calc(). Without spaces, the minus is treated as a negative number sign.

Nested math functions

/* Fluid padding that's never less than 16px or more than 48px */
.section {
  padding: clamp(16px, calc(4vw + 8px), 48px);
}

/* Font size: scales with viewport, clamped */
h1 {
  font-size: clamp(1.5rem, calc(1rem + 3vw), 3.5rem);
}

/* Sidebar: shrinks with content up to a max */
.sidebar {
  width: min(280px, 30%);
}

calc() for CSS custom property math

:root {
  --spacing-unit: 8px;
}

.card {
  padding: calc(var(--spacing-unit) * 3);  /* 24px */
  margin-bottom: calc(var(--spacing-unit) * 2); /* 16px */
  border-radius: calc(var(--spacing-unit) * 1.5); /* 12px */
}

/* Invert a variable's value */
.rotated {
  transform: rotate(calc(var(--angle) * -1));
}

Combining calc() with custom properties creates a powerful design token system.

Common Mistakes

Forgetting spaces around + and - in calc(): calc(100%- 2rem) is invalid
Trying to compute unitless values with calc() for properties that expect unitless: line-height: calc(1 + 0.5) works but calc(1em + 0.5) does not make sense
Dividing by zero or using invalid unit combinations: calc(1px / 1px) gives a unitless number, which is often not what is wanted

Note

Use calc() with custom properties to build a spacing scale: --space-1: calc(var(--base) * 1); --space-2: calc(var(--base) * 2); etc. Changing --base automatically updates your entire spacing system.

CSS calc() and Math Functions

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

Why is "calc(100% -2rem)" invalid CSS?