calc()
Calculates a value from an expression — even with mixed units.
Syntax
calc(expression)Parameters
| Parameter | Type | Description |
|---|---|---|
| expression | math | `+`, `-`, `*`, `/` with numbers, lengths, percentages and variables. |
Examples
A percentage minus pixels:
<style>
.side { float: left; width: 100px; background: gold; height: 60px; }
.main { margin-left: 110px; width: calc(100% - 110px); background: lightskyblue; height: 60px; }
</style>
<div class="side">100px</div>
<div class="main">calc(100% - 110px)</div>Arithmetic with custom properties:
<style>
:root { --space: 8px; }
.box { padding: calc(var(--space) * 2); background: lavender; }
</style>
<div class="box">Padding is twice the base space</div>Notes
Spaces around + and - are required: calc(100% -10px) does not work. Inside calc() you can use other functions: var(), min(), clamp().
See also
- clamp() — Keeps a value within limits: the preferred value, but not less than the minimum and not more than the maximum.
- min() — Takes the smallest of the values — a way to set an upper limit.
- var() — Inserts the value of a custom property (a CSS variable).
- px, em, rem, %, vw, vh — Units for lengths in CSS: absolute pixels and relative units.
In the tutorial
- CSS functions — Calculations right in CSS — calc(), min(), max() and clamp(), mixing units, fluid sizes and functions together with variables.