CSS min-width Property
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
Please Login to comment...