Menu
Advanced Features
CSS Math Functions
calc(), min(), max(), clamp().
1Calculations
Perform math right in your CSS.
Example Code
css
.box {
width: calc(100% - 40px);
}
.responsive-text {
font-size: clamp(1rem, 2.5vw, 2rem);
}2Understand it in a real interface
Math functions express a sizing relationship rather than a single fixed value. Calc combines compatible values, min and max bound a choice, and clamp supplies a lower bound, preferred value, and upper bound. They are useful when a fluid size needs practical limits.
3Try it yourself
Set a heading size with clamp using a readable minimum and a modest maximum. Resize the page and inspect the change. Then set a panel width with calc and check that its padding and box-sizing do not cause the final box to exceed the container.
Finished reading?
Mark this topic as complete to track progress.