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...