CSS min() Function
Last Updated :
05 Jul, 2023
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 >Geeks for geeks</ 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 >Geeks for geeks</ 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...