CSS calc function for numeric values

CSS calc() function allows expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values. It can be used wherever length, frequency, angle, time, number, or integer values are allowed. One can also have calc expression within calc.

calc values

Note that whitespace is required on both sides of the + and – operators. Some valid calc values are

• calc(100% – 100px)
• calc(100%/3 – 2*1em – 2*1px)

Fallback value

In case you are using calc function to define a property (say width), it may be a good idea to define a fallback width value in case browser does not support calc function. The fallback value should come before main value.

width: 95%;
width: calc(100% - 100px);

Example – css calc function

<style type="text/css">
.box {
  width: 100px;
  height: 100px; background-color:lightgreen;
}
</style>
<div class="box">
  some text
</div>

Specification and Browser compatibility