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;
}
: