calc

Back to the index.

This value allows you to perform a calculation in CSS.

In the example we have a div with 150px width and 5em padding. We want another div to have the same width, but without any padding. Its width should thus be 150px+10em. calc() allows us to specify that.

Example

Test div with 
width: calc(150px + 10em);
and all prefixes

The test div should be as wide as the comparison div.

Comparison div with 
width: 150px;
padding: 5px 5em;

Prefixes

Test div with 
width: calc(150px + 10em);
Test div with 
width: -webkit-calc(150px + 10em);
Test div with 
width: -moz-calc(150px + 10em);
Test div with 
width: -ms-calc(150px + 10em);
Test div with 
width: -o-calc(150px + 10em);