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:
html
<!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 >Beginner for Beginner</ h2 > </ div > </ body > </ html > |
Output:
Example 2:
html
<!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 >Beginner for Beginner</ h2 > </ div > </ body > </ html > |
Output:
Browsers supported:
- Chrome 79 and above
- Opera 66 and above
- Internet Explorer not supported
- Safari 11.1 and above
- Firefox 75 and above
- Edge 79 and above
Contact Us