CSS calc() function

Preamble

The calc() function lets authors perform calculations by passing an expression as a parameter. The function returns the result of the expression which is used as the value of the declaration.

Expressions

• May contain any combination of +, -, /, and * operators. The + and - operators must be bounded by whitespace on both sides.
• Can combine percent and absolute values : width: calc(100% - 37px);
• Accept combinations of varying units including em, px, vh, rem as long as they are of type <length>
• Custom properties (CSS variables) are allowed

Examples

Basic

div {
  width: calc(100% - 55px);
}

Custom Property

:root {
  —-my-padding: 17px;
}

div {
  width: calc(100% - var(—-my-padding));
}

Further Review

Review the following material and be sure to download the lesson file.

• Read A Couple of Use Cases for Calc() | CSS-Tricks
• Read CSS layout gets smarter with calc() | Web | Google Developers
• Read calc() - CSS: Cascading Style Sheets | MDN

Lesson File

CSS Best Practices Lesson File

References

• <length> - CSS: Cascading Style Sheets | MDN
• Basic math in JavaScript — numbers and operators - Learn web development | MDN
• CSS Values and Units Module Level 3