171 of 298 menu

The calc function

The calc function allows you to calculate CSS property values. The function takes a mathematical expression as a parameter, the result of which can be used as the value of a CSS property. The expression may include the +, -, *, / operators.

Syntax

selector { property: calc(expression); }

Example

Let's make the block width equal to 100% of the parent's width minus 50px:

<div id="parent"> <div id="child"></div> </div> #child { width: calc(100% - 50px); height: 100px; margin: 0 auto; border: 1px solid red; } #parent { border: 1px solid green; }

:

See also

  • the min function
    that returns a minimum value
  • the max function
    that returns a maximum value
enru