CSS min() Function
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:
<!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> |
Output:
Example 2:
<!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> |
Output:
Browsers supported:
- Chrome
- Opera
- Safari
- Firefox
- Edge
