Skip to content
Related Articles

Related Articles

Improve Article

CSS | min-width Property

  • Last Updated : 04 Jan, 2019

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:






    <!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:




    <!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:




    <!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:




    <!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
  • Internet Explorer 7.0
  • Firefox 1.0
  • Safari 2.0.2
  • Opera 4.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :