calc() CSS Function

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The calc() CSS function allows you to perform mathematical calculations directly within CSS property values. It enables dynamic value adjustments by combining different units, such as percentages, pixels, ems, rems, or viewport units, in a single expression. This is particularly useful when you need to create responsive layouts or when a value cannot be expressed with a single static unit. Unlike hard-coded values, calc() allows you to mix relative and absolute units - for example, combining width in percentages with px offsets to maintain a flexible design.

The function supports the four basic mathematical operations: addition (+), subtraction (−), multiplication (*), and division (/). Multiplication and division are restricted to numeric values, while addition and subtraction can be applied to compatible units. You can also use parentheses to group calculations and control the order of operations, similar to regular mathematics.

A common use case is adjusting an element’s dimensions while factoring in padding or margins. For instance, to create a div that fills the remaining width of its container minus a fixed sidebar width, you could use:

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

Another practical example is responsive font sizing, where you combine viewport units with a base font size:

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

Here, the font scales dynamically with the viewport width while maintaining a minimum size defined in rem.

calc() can also work with margin, padding, top, left, and other properties that accept numeric values. This makes it a versatile tool for creating fluid, adaptable designs without relying entirely on JavaScript.

Syntax

calc() = calc( <calc-sum> )

<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ] *

<calc-product> = <calc-value> [ '*' <calc-value> | '/' <calc-number-value> ] *

<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

<calc-number-sum> = <calc-number-product> [ [ '+' | '-' ] <calc-number-product> ] *

<calc-number-product> = <calc-number-value> [ '*' <calc-number-value> | '/' <calc-number-value> ] *

<calc-number-value> = <number> | ( <calc-number-sum> )

Values

+addition (width: calc (20px + 20px));
-subtraction (padding: calc (10% - 10px););
*multiplication (height: calc (20% * 2);)
/division. It is forbidden to divide by zero (width: calc (100% / 3);)

Example

HTML

<div class="container">

  <div class="sidebar">Sidebar</div>

  <div class="content">Main Content</div>

</div>

CSS

/* General styling for visibility */

.container {

  display: flex;

  height: 200px;

  width: 100%;

  border: 2px solid #333;

}



.sidebar {

  width: 150px; /* Fixed width */

  background-color: #f4f4f4;

  padding: 10px;

}



.content {

  /* Using calc() to mix units: 100% minus 150px */

  width: calc(100% - 150px); 

  

  background-color: #007bff;

  color: white;

  padding: 20px;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS calc() function. Hover over a browser icon to see the version that first introduced support for this CSS function.