CSS calc() Function

CSS calc() Function

The CSS calc() function performs mathematical calculations directly in CSS property values. It supports addition, subtraction, multiplication, and division, allowing developers to combine different units such as percentages, pixels, and rems. It is especially useful for responsive layouts, element sizing, spacing, and calculations involving CSS custom properties.

Syntax

calc(expression)

The calc() function accepts a mathematical expression containing values and operators.

For example:

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

This calculates a width equal to 100% of the containing block's available width minus 40 pixels.

Other examples include:

width: calc(50% + 20px);
height: calc(100vh - 80px);
margin-left: calc(2rem + 10px);
font-size: calc(1rem + 0.5vw);
padding: calc(10px * 2);
opacity: calc(100% / 2);

The result must be a valid value for the CSS property receiving it.

For example, width accepts lengths and percentages, while opacity accepts numbers and percentages.

Mathematical Operators

The calc() function supports four basic mathematical operators.

Each operator performs a calculation using the supplied values.

Addition:

width: calc(100px + 50px);

The result is 150px.

Subtraction:

width: calc(100% - 40px);

The result is the available percentage width minus 40 pixels.

Multiplication:

width: calc(25px * 4);

The result is 100px.

Division:

width: calc(200px / 2);

The result is 100px.

Multiplication and division can also be combined with addition and subtraction in the same expression.

How It Works

The browser evaluates the expression inside calc() and uses the resulting value for the CSS property.

For example:

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

If the containing block is 500 pixels wide, the calculated width is:

500px - 60px = 440px

If the containing block changes to 800 pixels, the result becomes:

800px - 60px = 740px

The browser recalculates the width when the relevant layout dimensions change.

This makes calc() useful for layouts that need to respond to different screen sizes.

Calculations are evaluated as part of CSS value processing. Some expressions, particularly those involving percentages, cannot be fully resolved until the browser determines the relevant layout dimensions.

The function does not require JavaScript.

Using Different Units

One of the main advantages of calc() is the ability to combine compatible CSS values that use different units.

For example:

width: calc(100% - 20px);
margin-top: calc(1rem + 10px);
height: calc(50vh - 2em);
transform: rotate(calc(45deg + 0.125turn));

These expressions combine percentages, lengths, and angles where the receiving CSS property allows them.

Different units must represent compatible types for addition and subtraction.

For example, this is invalid:

width: calc(100px + 2s);

A length and a time cannot be added together.

Similarly, multiplying two lengths is invalid:

width: calc(10px * 10px);

The result would have squared length units, which CSS width does not accept.

Modern CSS also supports dividing compatible dimensional values to produce unitless ratios in supporting browsers:

opacity: calc(50px / 100px);

This produces the number 0.5. Support for typed division is newer than basic calc() arithmetic.

Operator Precedence

The calc() function follows standard mathematical operator precedence.

Multiplication and division are evaluated before addition and subtraction.

For example:

width: calc(100px + 20px * 2);

The multiplication is evaluated first:

100px + 40px = 140px

Parentheses can change the order of operations:

width: calc((100px + 20px) * 2);

The addition is evaluated first:

120px * 2 = 240px

Parentheses are useful when an expression contains several operations.

For example:

width: calc((100% - 60px) / 3);

This subtracts 60 pixels from the available width, then divides the result by three.

Operators with equal precedence are evaluated from left to right.

Operator Spacing

Whitespace is important when writing calc() expressions.

The addition (+) and subtraction (-) operators must have whitespace on both sides.

Correct:

width: calc(100% - 20px);
width: calc(50px + 10px);

Incorrect:

width: calc(100%-20px);
width: calc(50px+10px);

The multiplication (*) and division (/) operators do not require surrounding whitespace, but including it improves readability.

For consistency, use spaces around all mathematical operators:

width: calc(20px * 3);
width: calc(200px / 2);

This makes calculations easier to read and avoids common syntax errors.

Using Custom Properties

The calc() function works with CSS custom properties through the var() function.

For example:

:root {
  --sidebar-width: 240px;
}
.content {
  width: calc(100% - var(--sidebar-width));
}

The content width is calculated by subtracting the sidebar width from the available width.

Custom properties can also control spacing:

:root {
  --base-spacing: 8px;
}
.card {
  padding: calc(var(--base-spacing) * 2);
  margin-bottom: calc(var(--base-spacing) * 3);
}

The padding becomes 16px, and the bottom margin becomes 24px.

Changing the custom property updates both calculations.

Custom properties must resolve to values compatible with the calculation and the receiving property.

Responsive Layouts

The calc() function is commonly used to create responsive layouts without fixed dimensions.

For example, a content area can fill the available width while leaving space for a sidebar:

.sidebar {
  width: 240px;
}
.main-content {
  width: calc(100% - 240px);
}

The content area adjusts as its containing block changes size.

Another example creates two equal-width columns with a gap:

.column {
  width: calc((100% - 20px) / 2);
}

If the containing block is 600 pixels wide, each column is 290 pixels wide, leaving 20 pixels for the gap.

For three columns with two 20-pixel gaps:

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

These calculations can be useful in custom layouts, although CSS Grid and Flexbox often provide simpler solutions for distributing space.

The function is also useful for sizing content around fixed headers:

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

This gives the content a minimum height equal to the viewport height minus an 80-pixel header.

Nested Calculations

The calc() function supports nested calculations.

For example:

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

The inner calculation produces 40px, which is subtracted from the available width.

Nested calc() functions are treated like parentheses, so the same expression can be written more simply:

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

Both declarations produce the same result.

Other CSS math functions can also be used inside calculations:

width: calc(min(100%, 800px) - 40px);

This selects the smaller of 100% and 800px, then subtracts 40 pixels.

When an expression becomes difficult to read, consider using custom properties to separate its components.

Example

The following example demonstrates how calc() can create two equal-width columns while reserving a fixed gap between them.

Resize the browser window to see the columns adjust automatically.

HTML:

<div class="calc-demo">
  <div class="calc-column">Column 1</div>
  <div class="calc-column">Column 2</div>
</div>

CSS:

.calc-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.calc-column {
  box-sizing: border-box;
  flex: 0 0 calc((100% - 20px) / 2);
  padding: 20px;
  background-color: #0066cc;
  color: #fff;
  text-align: center;
}
@media (max-width: 480px) {
  .calc-column {
    flex-basis: 100%;
  }
}

Each column receives half of the remaining width after subtracting the 20-pixel gap.

At viewport widths of 480 pixels or less, the media query changes the columns to full width.

Spacing Example

The following example uses calc() to create consistent spacing from a single custom property.

HTML:

<div class="calc-spacing-demo">
  <div class="calc-spacing-box">Standard Spacing</div>
  <div class="calc-spacing-box calc-spacing-large">Double Spacing</div>
</div>

CSS:

.calc-spacing-demo {
  --base-spacing: 10px;
  display: grid;
  gap: 15px;
}
.calc-spacing-box {
  padding: calc(var(--base-spacing) * 2);
  border: 1px solid #0066cc;
  background-color: #e8f2ff;
}
.calc-spacing-large {
  padding: calc(var(--base-spacing) * 4);
}

The first box has 20px padding, while the second has 40px padding.

Both values are calculated from the same --base-spacing custom property.

Related Math Functions

CSS provides several mathematical functions that can be used alongside calc().

For example, clamp() can limit a responsive font size:

font-size: clamp(1rem, calc(1rem + 1vw), 2rem);

The font size grows with the viewport but remains between 1rem and 2rem.

Common Uses

The calc() function is useful whenever a CSS value depends on a mathematical relationship.

For example, a centered element can be positioned using:

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

The left edge is positioned at half the containing block's width minus 100 pixels, centering the 200-pixel-wide element when its box sizing and other offsets do not change that width.

Limitations

The calc() function has several important rules and limitations.

• The expression must produce a value accepted by the receiving CSS property.
• Addition and subtraction require compatible value types.
• The + and - operators require whitespace on both sides.
• Multiplication cannot multiply two values that both have units.
• Division by two compatible dimensional values is a newer feature and may not be supported in older browsers.
• It cannot directly perform arithmetic on keywords such as auto, min-content, or max-content.
• Some calculations depend on layout dimensions that are not known until later in rendering.
• Invalid expressions cause the affected declaration to be ignored or become invalid at computed-value time.

For example, this is valid:

width: calc(100% - 20px);

However, the following expression is invalid because the operator lacks the required spacing:

width: calc(100% -20px);

This expression is also invalid:

width: calc(100px + 2s);

Lengths and times are incompatible for addition.

The following is not supported:

width: calc(auto - 20px);

For calculations involving intrinsic sizes, use the separate calc-size() function where supported.

Also, calc() cannot be followed by a unit to convert its result:

width: calc(100 / 2)px;

Instead, include the unit inside the calculation:

width: calc(100px / 2);

Browser Support

The calc() function is Baseline Widely available and has been supported across major browser engines since July 2015.

Basic calculations using addition, subtraction, multiplication, division, and compatible CSS units are widely supported.

Newer features, including typed division between dimensional values, may have different browser support.

For a simple fallback, provide a conventional value before the calculation:

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

Browsers that do not support the calculation retain the earlier valid declaration.

You can also check support using @supports:

@supports (width: calc(100% - 40px)) {
  .example {
    width: calc(100% - 40px);
  }
}

For current compatibility information, visit Can I Use? and search for CSS calc().

Specifications

The calc() function is defined in the CSS Values and Units Module Level 4 .

The specification defines mathematical expressions, operator precedence, value compatibility, and the rules for evaluating CSS calculations.

Related functions include min(), max(), clamp(), round(), mod(), rem(), and calc-size().