The calc() function performs math operations on CSS values, especially useful when mixing different units.

Basic Syntax

div {
  width: calc(100% - 40px);
}

Supported Operations

• + addition
• - subtraction
• * multiplication
• / division

div {
  width: calc(100% / 3);
  padding: calc(1rem * 2);
}

Important: Spacing Rules

For addition and subtraction, spaces around the operator are required:

/* Correct */
width: calc(100% - 20px);

/* Incorrect - won't work */
width: calc(100%-20px);

Multiplication and division don’t require spaces, but using them improves readability.

Mixing Units

The real power of calc() is combining different units:

.sidebar {
  width: calc(100% - 300px);
}

.content {
  height: calc(100vh - 60px);  /* Full height minus header */
}

Nested calc()

You can nest calculations:

div {
  width: calc(calc(100% - 40px) / 2);
}

Though often you can simplify:

div {
  width: calc((100% - 40px) / 2);
}

Common Use Cases

Fixed Sidebar with Fluid Content

.sidebar {
  width: 250px;
}

.main {
  width: calc(100% - 250px);
}

Centered Element with Max Width

.container {
  width: calc(100% - 2rem);
  max-width: 1200px;
  margin: 0 auto;
}

Equal Columns with Gap

.column {
  width: calc((100% - 40px) / 3);  /* 3 columns with 20px gaps */
  margin-right: 20px;
}

.column:last-child {
  margin-right: 0;
}

Responsive Typography

h1 {
  font-size: calc(1.5rem + 2vw);
}

Full Height Minus Header

.content {
  min-height: calc(100vh - 80px);
}

With CSS Variables

calc() works great with CSS custom properties:

:root {
  --header-height: 60px;
  --spacing: 1rem;
}

.main {
  height: calc(100vh - var(--header-height));
  padding: calc(var(--spacing) * 2);
}

Browser Support

calc() is supported in all modern browsers. It’s a safe and reliable feature to use in production.

Lessons in this unit:

0:	Introduction
1:	How to Work with CSS Fonts
2:	How to Style Text with CSS Typography
3:	How to Use CSS Colors
4:	How to Use CSS Backgrounds
5:	How to Use CSS Filters
6:	How to Use CSS Units
7:	▶︎ How to Use the CSS calc() Function
8:	How to Use Google Fonts
9:	RGB color codes