CSS calc() Function

CSS calc() Function

The CSS calc() function performs mathematical calculations when determining a property value. It is especially useful when a value depends on a combination of percentages, lengths, custom properties, or other compatible CSS values.

Calculations are performed by the browser when CSS values are resolved, allowing layouts and dimensions to adapt without requiring a fixed value to be calculated in advance.

calc() Syntax

The calc() function contains a mathematical expression inside parentheses.

property: calc(expression);

For example, an element can be given the full available width minus a fixed amount.

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

The browser first determines what 100% represents in the current context and then subtracts 40px to calculate the used width.

The result of the calculation must be valid for the CSS property receiving it.

Arithmetic Operators

The calc() function supports the standard arithmetic operators shown below.

Whitespace is required around the + and - operators. Writing spaces around all arithmetic operators also makes calculations easier to read.

Addition and Subtraction

Addition and subtraction are commonly used when an element needs to occupy an available space with a fixed adjustment.

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

This can be useful when a percentage-based dimension must account for a fixed amount of spacing.

Values can also be added.

.box {
  width: calc(50% + 20px);
}

The browser calculates half of the relevant available width and then adds 20px.

Multiplication and Division

Modern CSS Values and Units defines multiplication and division in mathematical expressions, allowing compatible numeric values to be multiplied or divided.

.box {
  width: calc(20px * 5);
}

This calculation produces a length of 100px.

Division can also be used when the resulting type is valid for the property.

.column {
  width: calc(100% / 3);
}

This divides the available percentage into three equal portions.

Because newer mathematical syntax can have different browser support than long-established calc() addition and subtraction, check current browser compatibility before depending on multiplication or division in production stylesheets.

Mixing Units

One of the most useful features of calc() is its ability to combine compatible values that use different units.

.content {
  width: calc(100% - 3rem);
}

A percentage and a rem value cannot normally be combined into a single literal CSS value, but the browser can resolve them as part of a calculation.

Viewport and fixed units can also be combined.

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

This can make an element fill the viewport height while leaving room for an 80px area such as a header.

The units still need to represent values that can be combined meaningfully for the property being calculated.

Using calc() for Layout

The calc() function is often useful when a layout combines flexible and fixed dimensions.

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

For example, this could represent the space remaining beside a fixed-width 250px sidebar.

Calculations can also be used for positioning.

.box {
  position: absolute;
  left: calc(50% - 100px);
  width: 200px;
}

The left edge is positioned at half the containing block's width and then moved back by half the box width.

Modern layout systems such as Flexbox and Grid can often solve these layouts more directly, so use calc() when the calculation itself makes the layout clearer or provides a value those layout systems still need.

calc() with Custom Properties

CSS custom properties can supply values to calculations, making formulas easier to reuse and update.

:root {
  --sidebar-width: 250px;
  --gap: 30px;
}
.main {
  width: calc(100% - var(--sidebar-width) - var(--gap));
}

The var() functions retrieve the custom property values before they are used in the calculation.

Custom properties can also store part of a calculation.

:root {
  --spacing: 20px;
}
.card {
  padding: calc(var(--spacing) * 2);
}

This allows a base design value to be reused as the starting point for related calculated values.

calc() with Other Functions

The calc() function can be combined with other CSS functions when their value types are compatible.

.content {
  width: min(100%, calc(1200px - 40px));
}

In this example, calc() calculates one value and min() selects the smaller of that result and 100%.

Custom properties are also frequently nested inside calculations.

.heading {
  font-size: calc(var(--base-size) * 1.5);
}

Combining functions allows complex values to remain responsive to their surrounding context and reusable design values.

Order of Operations

CSS mathematical expressions follow normal operator precedence. Multiplication and division are evaluated before addition and subtraction.

.box {
  width: calc(100px + 20px * 2);
}

The multiplication is evaluated before the addition.

Parentheses can group part of an expression when a different calculation order is needed.

.box {
  width: calc((100px + 20px) * 2);
}

Using parentheses can also make a complicated calculation easier to understand even when the default precedence would produce the same result.

calc() Practices

CSS calc() Example

The following example uses calc() to make an element fill the available width while leaving 40px of space.

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

Open the example in the editor and change 40px to another value, such as 80px or 4rem. Run the example again to see how the browser recalculates the width.