CSS Math Functions

CSS (Cascading Style Sheets) provides several math functions that allow you to perform mathematical calculations directly in your CSS stylesheets. These functions can be used to manipulate numerical values such as lengths, angles, colors, and more. Here are some commonly used CSS math functions:

• calc(): The calc() function is used for performing calculations. It allows you to combine different units, perform arithmetic operations, and use mathematical expressions. For example:css

width: calc(100% - 20px);
font-size: calc(12px + 2vmin);

min(): The min() function returns the smallest value among the provided arguments. It can be used to set a property to the minimum value of multiple values. For example:

css

width: min(200px, 50%);
font-size: min(16px, 2vw);

max(): The max() function returns the largest value among the provided arguments. It can be used to set a property to the maximum value of multiple values. For example:

css

width: max(200px, 50%);
font-size: max(16px, 2vw);

clamp(): The clamp() function restricts a value to a specified range. It takes three arguments: a minimum value, a preferred value, and a maximum value. The function returns the preferred value if it falls within the range; otherwise, it returns the closest boundary. For example:

css

width: clamp(200px, 50%, 500px);
font-size: clamp(16px, 2vw, 24px);

abs(): The abs() function returns the absolute value of a number. It can be used to remove the sign from a negative value. For example:

css

margin-left: abs(-20px);

sqrt(): The sqrt() function calculates the square root of a number. It can be used to create dynamic styles based on the square root of a value. For example:

css

• width: sqrt(100px);

These CSS math functions enable you to perform calculations and create more flexible and dynamic stylesheets. They are widely supported by modern browsers.