Examples

Example #1: Positioning Background Images

The following example stacks two centered background images on top of each other, with one offset slightly from the other.

.foo {
  background: url(top.png), url(bottom.png);
  background-repeat: no-repeat;
  background-position: calc(50% + 20px) calc(50% + 20px), 50% 50%;
}
                

This will make sure the images are stacked on top of each other while keeping the first image offsetted by ’20px’ to the right and bottom from the position of the center.

calc() can also be used to position a background image with offsets that are relative to the right and bottom sides, instead of the top and left sides, which are the two sides used for offsetting background positions in CSS.

For example, suppose you want to position an image at the bottom right corner of the element’s background area, but you want it to be 20px above the bottom and 20px to the left of the right edge. Using the background-position offsets, you can’t specify offsets from the bottom and right. For example, background-position: 20px 20px; would offset the image by ’20px’ from the left and top edges, thus positioning it at the top left corner. But using calc(), positioning the image relative to the right and bottom edges is as easy as:

.element {
    background-position: calc(100% - 20px) calc(100% - 20px);
}
                

The following is the live demo:

Example #2: Margins Relative to Font Size

In this example, we’re using calc() to calculate the width of an element relative to its parent’s width, and then subtract the amount of margin we want from that width. The value of the margin is set in em units, which means that the amount is going to be relative to the element’s font size.

The element is going to have a width that is equal to its parent’s width (100%), and then we’re going to subtract the amount of margin that we want:

.child {
    width: calc(100% - 2em); /* 1em margin on each side */
}
                

If the font size changes, the margins will adjust. The element is going to be centered inside its parent using margin: auto;. Here is the live demo; the container has a purple background color, and the element itself is centered inside it. You can see the margins on both sides. Try changing the value of the font size to see how the margins change.

Similarly, if you want the width of an element to be the same as its parent without counting its own padding, you can do something like this:

.child {
    padding: 10px;  
    width: calc(100% - 20px);
}

                

The ’20px’ counts for the padding on the left and right of the element.

However, using calc() to do this kind of math is probably not going to be needed since the box-sizing property allows us to avoid these calculations altogether. The above width: calc(100% - 20px) expression is equivalent to saying:

.el {
    width: 100%;
    padding: 10px;
    box-sizing: padding-box;
}
                

We are able to specify the width and padding of our element without having to worry about calculations. Similarly, you can add borders to an element and account for those borders using calc(), or avoid that altogether using box-sizing with a value of border-box.

.el {
    padding: 10px;
    border: 2px solid black;
    width: calc(100% - 20px - 4px); /* subtract the values of the padding and borders so that the element does not become wider than its parent */
}

/* OR */
.el {
    box-sizing: border-box; /* magical! */
    padding: 10px;
    border: 2px solid black;
    width: 100%; /* without a fuss */
}
                

You can read more about the advantages of the box-sizing property, its use cases, and the meaning of its values in the box-sizing property entry.

More Examples…

Since calc() can be used anywhere a length value can be used, the following are all valid use cases:

• Setting the margins of a paragraph:

  p {
    margin: calc(1rem - 2px) calc(1rem - 1px);
  }
                          

• The following will place color-stops on a gradient an equal distance from either end.

  .foo {
    background-image: linear-gradient(to right, silver,
                                                white 50px,
                                                white calc(100% - 50px),
                                                silver);
  }
                          

• The following sets the font-size so that exactly ’40em’ fits within the viewport, ensuring that roughly the same amount of text always fills the screen no matter the screen size.

  :root {
      font-size: calc(100vw / 40);
  }
                      

  If the rest of the design is specified using the rem unit, the entire layout will scale to match the viewport width.

• The following sets the line-height of an element relative to the viewport height:

  h1 {
    font: 3em / calc(100vh - 1em) "Lora", sans-serif;  
  }
                          

• Combined with the power of a preprocessor, calc() can be used to create CSS grid systems. It makes calculating widths, margins, and paddings a lot easier. For example, in a six-column grid system, you may have classes like the following:

  .col-1-6 { /* 1/6th of the width */
      width: 16.66%
  }
  .col-5-6 { /* 5/6th of the width */
      width: 83.333%;
  }
                          

  The above numbers are very intuitive at first glance, and, looking at the numbers alone, it may not be clear how much each column measures relative to the width of the entire system. Using calc(), the above can be replaced with:

  .col-1-6 {
      width: calc(100% / 6);
  }
  .col-5-6 { 
      width: calc(100% / 6 * 5);
  }
                          

  The above mathematical expressions make understanding the proportions and widths much easier.
  You can read more on how you can create a grid system using calc() and Sass in this article, and in this article on SitePoint.