Skip to content
Related Articles

Related Articles

CSS | min-width Property

Improve Article
Save Article
  • Last Updated : 13 Jul, 2022
Improve Article
Save Article

The min-width property in CSS is used to define the minimum width of an element. The value of the width cannot be less than the value of min-width. If the content specified within the element is smaller, min-width maintains the specified minimum width. 

Syntax:

min-width: length|initial|inherit;

Property Values:

  • length: This property is used to set the length of min-width. The length can be set in the form of px, cm etc. 

Syntax:

min-width: length;

Example: 

html




<!DOCTYPE html>
<html>
    <head>
        <title>min-width property</title>
         
        <!-- min-width CSS property -->
        <style>
            p {
                min-width: 300px;
                display: inline-block;
                color:white;
                background-color:green;
            }
        </style>
    </head>
     
    <body>
        <p>
            GeeksforGeeks: A computer science portal
        </p>
    </body>
</html>                    


Output:

 

  • percentage (%): It is used to set the minimum width in percentage. 

Syntax:

min-width: %;
  • Example: 

html




<!DOCTYPE html>
<html>
    <head>
        <title>min-width property</title>
         
        <!-- min-width CSS property -->
        <style>
            p {
                min-width: 35%;
                display: inline-block;
                color:white;
                background-color:green;
            }
        </style>
    </head>
     
    <body>
        <p>
            GeeksforGeeks: A computer science portal
        </p>
    </body>
</html>                    


Output:

 

  • initial: It is used to set min-width property to its default value. 

Syntax:

min-width: initial;

Example: 

html




<!DOCTYPE html>
<html>
    <head>
        <title>min-width property</title>
         
        <!-- min-width CSS property -->
        <style>
            p {
                min-width: initial;
                display: inline-block;
                color:white;
                background-color:green;
            }
        </style>
    </head>
     
    <body>
        <p>
            GeeksforGeeks: A computer science portal
        </p>
    </body>
</html>                    


Output:

 

  • inherit: This property is inherited from its parent. 

Syntax:

min-width: inherit;

Example: 

html




<!DOCTYPE html>
<html>
    <head>
        <title>min-width property</title>
         
        <!-- min-width CSS property -->
        <style>
            .gfg {
                min-width: initial;
                display: inline-block;
                color:white;
                background-color:green;
            }
            P {
                min-width: inherit;
            }
            .geeks {
                min-width: initial;
                display: inline-block;
                color:white;
                background-color:blue;
            }
        </style>
    </head>
     
    <body>
        <div class = "gfg">
            <p>
                GeeksforGeeks: A computer science portal
            </p>
            <div class = "geeks">
                GeeksforGeeks: A computer science portal
            </div>
        </div>
    </body>
</html>                                     


Output:

 

Supported Browsers: The browser supported by min-width property are listed below:

  • Google Chrome 1.0 and above
  • Edge 12.0 and above
  • Internet Explorer 7.0 and above
  • Firefox 1.0 and above
  • Safari 1.0 and above
  • Opera 4.0 and above

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!