CSS min-width Property
Use the min-width CSS property to set the minimum width of the content area of an element.See property values with examples.
The min-width property sets the minimum width of an element. This property prevents the width property's value from becoming smaller than the value specified for min-width.
Note that when used together with the width and max-width properties, min-width acts as a lower bound. The computed width is clamped between min-width and max-width, overriding the width value if it falls outside that range.
The property takes a CSS length (px, pt, em, and so on), or a percentage.
Negative length values are illegal.
| Initial Value | 0 |
|---|---|
| Applies to | All elements, but non-replaced inline elements, table rows, and row groups. |
| Inherited | No. |
| Animatable | Yes. Width is animatable. |
| Version | CSS2 |
| DOM Syntax | object.style.minWidth = "200px"; |
Syntax
Syntax of CSS min-width Property
min-width: <length> | <percentage> | initial | inherit;Example of the min-width property:
Example of CSS min-width Property with px value
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title of the document</title>
<style>
div {
width: 10px;
min-width: 70%;
background-color: #1c87c9;
color: #ffffff
}
</style>
</head>
<body>
<div>The min-width of this text is defined as 70%.</div>
</body>
</html>Result
Here the minimum width of the element is 10cm:
Example of the min-width property specified in "cm":
Example of CSS min-width Property with cm value
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title of the document</title>
<style>
span {
background-color: #ccc;
min-width: 0;
}
.example {
min-width: 10cm;
display: inline-block;
}
</style>
</head>
<body>
<h2>Min-width property example</h2>
<h3>Min-width: 0:</h3>
<span>Minimum width is set to 0.</span>
<h3>min-width: 10cm:</h3>
<span class="example">Minimum width is set to 10cm.</span>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| length | Defines minimum width in px, pt, cm, etc. Default value is 0. | Play it » |
| % | Sets the minimum width in % of containing element. | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parent element. |
Practice
What is the functionality of the 'min-width' property in CSS?