It establishes the minimum width of the content box within the element, ensuring that the width can exceed the specified min-width but not fall below it. This property defines the smallest allowable width for the element.
It gets enforced when the content size is below the minimum width; if the content is larger, this attribute will not have any impact. This attribute guarantees that the CSS width property's setting will not be smaller than the min-width property's setting. Negative values are not permitted under this rule.
Syntax
min-width: none | length | initial | inherit;
The definitions for the values of this CSS attribute are outlined below:
none: It represents the initial value that imposes no restrictions on the width of the content container.
The length property specifies the size of min-width in pixels, centimeters, points, and other units.
It assigns the attribute back to its original default setting.
Inheritance: It acquires the property from its parent element.
Next, let's explore an instance of employing this CSS attribute.
Example
In this instance, there are four paragraph elements containing content. We are establishing the minimum width of these paragraphs by specifying the length value of the min-width property. The initial paragraph has a minimum width of 425px, the second paragraph is 22em wide, the third paragraph is 220pt in width, and the fourth paragraph's minimum width is defined as initial.
<!DOCTYPE html>
<html>
<head>
<title>
min-width property
</title>
<style>
p{
border: 4px solid blue;
background-color: lightblue;
display: inline-block;
}
#px {
min-width: 425px;
}
#em {
min-width: 22em;
}
#pt {
min-width: 220pt;
}
#cm {
min-width: initial;
}
</style>
</head>
<body>
<h3> min-width: 425px; </h3>
<p id = "px">
Hi, Welcome to the C# Tutorial.
</p>
<h3> min-width: 22em; </h3>
<p id = "em">
Hi, Welcome to the C# Tutorial.
</p>
<h3> min-width: 220pt; </h3>
<p id = "pt">
Hi, Welcome to the C# Tutorial.
</p>
<h3> min-width: initial; </h3>
<p id = "cm">
Hi, Welcome to the C# Tutorial.
</p>
</body>
</html>
Output