calc()
The calc() function performs arithmetic to compute a CSS length, time, or other numeric value.
Syntax
calc(<expression>)Examples
.main {
width: calc(100% - 280px);
padding: calc(1rem + 2vw);
}
Output
Sizes the main column to the viewport minus a fixed sidebar and gives it fluid padding.
Notes
Mixes units freely (%, px, rem, vw). Whitespace around + and - is required. Nesting is allowed. For min/max/clamping use the dedicated min(), max(), and clamp() functions.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 26 |
| firefox | 16 |
| safari | 7.0 |
| edge | 12 |