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.
- percentage (%): It is used to set the minimum width in percentage.
- initial: It is used to set min-width property to its default value.
- inherit: This property is inherited from its parent.
Example: In this example, we are using the min-width: length property.
html
<!DOCTYPE html>
<html>
<head>
<title>min-width property</title>
<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:
Example: In this example we are using the min-width: % property.
html
<!DOCTYPE html>
<html>
<head>
<title>min-width property</title>
<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:
Example: In this example, we are using min-width: initial property.
html
<!DOCTYPE html>
<html>
<head>
<title>min-width property</title>
<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:
Example: In this example, we are using min-width: inherit property.
html
<!DOCTYPE html>
<html>
<head>
<title>min-width property</title>
<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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
13 Jun, 2023
Like Article
Save Article