CSS min() Function

Q: What does the min() function do in CSS?

The min() function allows you to set a value based on the minimum of two or more arguments, which can be useful for responsive designs to ensure elements do not grow beyond a certain size.

Q: How do you use the min() function in CSS?

Use min() in CSS properties like width or height, for example: width: min(80%, 600px);, to select the smaller value between 80% and 600px.

Q: Can min() be used with percentages and absolute units?

Yes, min() can mix different units like percentages and pixels, providing flexible options for responsive design.

Q: Is the min() function widely supported in CSS?

The min() function is supported in most modern browsers, providing robust functionality for contemporary web design.

Last Updated : 30 Aug, 2024

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

CSS min() Function – FAQs

What does the min() function do in CSS?

The min() function allows you to set a value based on the minimum of two or more arguments, which can be useful for responsive designs to ensure elements do not grow beyond a certain size.

How do you use the min() function in CSS?

Use min() in CSS properties like width or height, for example: width: min(80%, 600px);, to select the smaller value between 80% and 600px.

Can min() be used with percentages and absolute units?

Yes, min() can mix different units like percentages and pixels, providing flexible options for responsive design.

What are common use cases for the min() function in CSS?

Common uses include setting maximum sizes for elements in responsive layouts, such as limiting the width of content on larger screens.

Is the min() function widely supported in CSS?

The min() function is supported in most modern browsers, providing robust functionality for contemporary web design.

CSS opacity() Function

tarun007

Improve

Article Tags :