CSS calc() Function
Example
img {
width: calc(100% - 100px);
}
Meaning
The calc() css function perform calculations when specifying CSS property values.
It can be used with length, frequency, angle, time, percentage, number, or integer values.
Version: CSS
Standard Syntax
/* property: calc(expression) */
width: calc(100% - 100px);
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Status
Function Arguments
The following table describes the arguments of this function.
Argument | Description |
---|---|
expression | Specifies a single expression as its parameter, with the expression's result used as the value. The expression can be any simple expression combining the following operators.
|
More Example
You can extend the capabilities of calc() by passing in CSS custom properties.
Example
div {
--base-hue: 120;
--saturation: 55%;
--lightness: 40%;
--rotation: 40;
}
div {
padding: 0.25rem;
background-color: hsl(var(--hue), var(--saturation), var(--lightness));
}
.example1 {
--hue: calc(var(--base-hue));
}
.example2 {
--hue: calc(var(--base-hue) + var(--rotation));
}
.example3 {
--hue: calc(var(--base-hue) + var(--rotation) * 2);
}
The above example create color palette using hsl() (which stands for hue, saturation, and lightness).
The given values for saturation, lightness, and a starting hue, you can calculate complementary values to build a full palette.
Because of the commonality among the saturation and lightness values, the palette will feel cohesive.
Tip:
When calc() is used for controlling text size, be sure that one of the values includes a relative length unit, for example:
p {
font-size: calc(1.5rem + 3vw);
}
This ensures that text size will scale if the page is zoomed.
Notes:
- The + and - operators must be surrounded by whitespace. For instance, calc(50% -8px) will be parsed as "a percentage followed by a negative length" — which is an invalid expression — while calc(50% - 8px) is "a percentage followed by a subtraction operator and a length". Likewise, calc(8px + -50%) is treated as "a length followed by an addition operator and a negative percentage".
- The * and / operators do not require whitespace, but adding it for consistency is recommended.
- Division by zero results in an error being generated by the HTML parser.
- Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified.
- It is permitted to nest calc() functions, in which case the inner ones are treated as simple parentheses.
- For lengths, you can't use 0 to mean 0px (or another length unit); instead, you must use the version with the unit: margin-top: calc(0px + 20px); is valid, while margin-top: calc(0 + 20px); is invalid.
- The calc() function cannot directly substitute the numeric value for percentage types; for instance calc(100 / 4)% is invalid, while calc(100% / 4) is valid.