3 min read
•Question 24 of 49easyHow Does CSS calc() Work?
Understanding CSS calculations.
What You'll Learn
- calc() syntax
- Mixing units
- Common use cases
Syntax
styles.cssCSS
.element {
width: calc(100% - 40px);
height: calc(100vh - 60px);
font-size: calc(1rem + 1vw);
}Operators
+Addition (spaces required)-Subtraction (spaces required)*Multiplication/Division
Common Use Cases
styles.cssCSS
/* Full width minus sidebar */
.main {
width: calc(100% - 300px);
}
/* Center with offset */
.popup {
left: calc(50% - 150px);
}
/* Responsive font scaling */
.heading {
font-size: calc(1.5rem + 2vw);
}
/* With CSS variables */
.element {
padding: calc(var(--spacing) * 2);
}