calc() CSS function

The calc() function is a CSS function that does math to set a value. It lets you mix units in one expression, such as width: calc(100% - 40px), and the browser works out the result when it lays out the page.

It supports addition, subtraction, multiplication, and division, and the pieces can be percentages, pixels, rems, or CSS variables. Common uses are fitting a box next to a fixed sidebar, or setting a maximum width that leaves room for padding. Spaces around + and - are required, so calc(100%-40px) is invalid. In Webflow, calc() works in the Style panel for many size fields, and you can use it in custom code.