CSS TutorialCSS Math FunctionsCSS Math FunctionsCSS Math functions are a set of built-in functions that allow you to perform mathematical operations in CSS. Here are some of the most commonly used math functions:The calc() FunctionsThis function allows you to perform simple math operations like addition, subtraction, multiplication, and division within a CSS property.As an example:EditorLoading...Run Example >>In this example:We use the calc() function to set the width and height of a div element to be 20 pixels less than the full width and 100 pixels less than the full height of the viewport, respectively.We also use calc() to set the font size of an h1 element to be 1.5 times the base font size plus 10 pixels, and the font size of a p element to be 14 pixels plus 0.5% of the viewport width.The min() FunctionsThis function returns the smallest value among two or more input values. You can use min() to set a property to the smallest of several values.As an example:EditorLoading...Run Example >>In this example:We use the min() function to set the width of a div element to be either 50% of the container width or 300 pixels, whichever is smaller.We also use min() to set the height of the div element to be either 400 pixels or 80% of the viewport height, whichever is smaller.We also use min() to set the font size of an h1 element to be either 2.5 times the base font size or 5% of the viewport width, whichever is smaller.We use min() to set the font size of a p element to be either 16 pixels or 1.5 times the parent element's font size, whichever is smaller.tipThe min() function allows you to set a property to the smallest of several values, which can be useful for making your layouts responsive to different screen sizes and devices.The max() FunctionsThis function returns the largest value among two or more input values. You can use max() to set a property to the largest of several values.As an example:EditorLoading...Run Example >>In this example:We use the max() function to set the width of a div element to be either 30% of the container width or 200 pixels, whichever is larger.We also use max() to set the height of the div element to be either 300 pixels or 60% of the viewport height, whichever is larger.We also use max() to set the font size of an h1 element to be either 2 times the base font size or 3% of the viewport width, whichever is larger.We use max() to set the font size of a p element to be either 14 pixels or 80% of the parent element's font size, whichever is larger.tipThe max() function allows you to set a property to the largest of several values, which can be useful for making your layouts responsive to different screen sizes and devices.The clamp() FunctionsThis function allows you to set a value that is within a range of minimum and maximum values. You can use clamp() to set a property to a value that is within a specified range.As an example:EditorLoading...Run Example >>In this example:We use the clamp() function to set the width of a div element to be a value that is between 200 pixels and 50% of the container width, but not less than 200 pixels or greater than 500 pixels.We also use clamp() to set the height of the div element to be a value that is between 200 pixels and 60% of the viewport height, but not less than 200 pixels or greater than 400 pixels.We also use clamp() to set the font size of an h1 element to be a value that is between 2 times the base font size and 5% of the viewport width, but not less than 2rem or greater than 4rem. We use clamp() to set the font size of a p element to be a value that is between 14 pixels and 120% of the parent element's font size, but not less than 14px or greater than 18px.tipThe clamp() function allows you to set a property to a value that is between a minimum and maximum value, which can be useful for creating flexible and responsive layouts.