calc()
calc() allows CSS to perform arithmetic involving compatible values. It is particularly useful when combining relative and fixed units, such as creating a full-width container with a fixed gutter.
The browser resolves the expression during computed-value processing.
calc() Value Construction
Combining Relative and Fixed Units
.content {
width: calc(100% - 2rem);
margin-inline: auto;
}
.sidebar {
width: calc(100vw - 320px);
}💡
calc() lets fixed and relative values participate in the same expression.Key Takeaways
calc()is useful for mixed-unit calculations.- Use it when a relationship cannot be expressed cleanly with simpler sizing functions.
Knowledge Check
What is a common use of `calc()`?