CSS Math Functions
Published Aug 9, 2021Updated Sep 9, 2021
Contribute to Docs
Performing dynamic mathematical calculations to set property values might sound difficult, but the calc() function makes handling mathematical expressions simple and if we want to create responsive elements, the min() and max() functions are great solutions for setting case-specific design constraints.
Math Functions
- calc()
- Performs mathematical calculations to determine values for properties.
- clamp()
- Restricts a given value between an upper and lower bound.
- max()
- Sets the largest value from a list of one or more comma-separated expressions as the value for a CSS property.
- min()
- Sets the smallest value from a list of one or more comma-separated expressions as the value for a CSS property.
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn CSS on Codecademy
- Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
- Includes 34 Courses
- With Professional Certification
- Beginner Friendly.115 hours
- In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.
- Beginner Friendly.6 hours