Skip to content
Related Articles

Related Articles

CSS min() Function
  • Last Updated : 29 Jul, 2020

min() function in CSS is used to extract the minimum value from a set of comma-separated values. It can take two parameters and a min function can be used inside another min function if the comparison is to be made between multiple values.

Syntax:

min(value1, value2);
min(value1, min(value2, min(value3, value4)));

Parameters: It takes the following parameters.

  • values: It is the set of comma-separated values from which the smallest one is extracted.

Returns: This function returns the smallest value from a set of comma-separated values.

Below given are a few examples of the above function.



Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width,
                 initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  /* CSS for the html */
*{
  font-family: 'Times New Roman', Times, serif;
  font-size: 20px;
  font-stretch: narrower;
  font-weight: 600;
  }
.box{
  display: flex;
  color: white; 
  background-color: green;
  justify-content: center;
  height: min(200px, 500px);
  width: min(200px, 500px);
}
h2{
  align-self: center;
}
</style>
<body>
  When nested min function is not used
  <div class="box">
    <h2>Geeks for geeks</h2>
  </div>
</body>
</html>

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width,
                 initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  /* CSS for the html */
*{
  font-family: 'Times New Roman', Times, serif;
  font-size: min(20px, 1000px);
  font-stretch: narrower;
  font-weight: 600;
  }
.box{
  display: flex;
  color: white; 
  background-color: green;
  justify-content: center;
  height: min(20vh, min(30vh, min(40vh, 50vh)));
  width: min(50vw, min(50vw, min(40vw, 50vw)));
}
h2{
  align-self: center;
}
</style>
<body>
  When nested min function is
    used with different units
  <div class="box">
    <h2>Geeks for geeks</h2>
  </div>
</body>
</html>

chevron_right


Output:

Browsers supported:

  • Chrome
  • Opera
  • Safari
  • Firefox
  • Edge
My Personal Notes arrow_drop_up
Recommended Articles
Page :