Skip to content
Related Articles

Related Articles

CSS max() Function

View Discussion
Improve Article
Save Article
  • Last Updated : 19 Aug, 2022
View Discussion
Improve Article
Save Article

The max() function in CSS is used to set the maximum of the numbers given. It is used to return the largest value from a set of comma-separated values. It can accept length, frequency, integer, angle, and time types of values.

Syntax:

max(value1, value2...);

Parameters: It takes any number of parameters.

  • Values: It is the set of comma-separated values from which the largest one is chosen.

Return Value: This function returns the largest value from a set of comma-separated values.

Example 1: This example demonstrates the above mentioned function when only 2 parameters are given.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
 
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-content: center;
            color: white;
            font-size: 30px;
            background-color: green;
            width: max(100px, 400px);
            height: max(100px, 400px);
        }
 
        p {
            align-self: center;
        }
    </style>
</head>
 
<body>
    <div class="container">
         
<p>Geeks for geeks</p>
 
    </div>
</body>
 
</html>

Output:

Example 2: When more than two parameters are given in max() function.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
 
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-content: center;
            color: white;
            font-size: auto;
            background-color: green;
            width: max(10px, max(max(10px, 40px),
                        max(10px, 150px)));
 
            height: max(10px, max(max(10px, 40px),
                        max(10px, 100px)));
        }
 
        p {
            align-self: center;
        }
    </style>
</head>
 
<body>
    When nested max function is used
    <div class="container">
         
<p>Geeks for geeks</p>
 
    </div>
</body>
 
</html>

Output:

Supported Browsers:

  • Chrome 79 and above
  • Edge 79 and above
  • Internet Explorer not supported
  • Firefox 75 and above
  • Opera 66 and above
  • Safari 11.1 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!