CSS - min-width



The min-width property is used to set an lower bound on the width of an element.

Possible Values

  • <length> − Any length unit. The element can never have a value for width which is lower than this value. Default value is 0.

  • <length> − It sets the element's minimum width in the percentage of the width of the containing block.

  • initial − Sets the value of min-width to its default value.

  • inherit − The value of min-width is inherited from its parent value.

Applies to

All the HTML elements except non-replaced inline elements and table elements.

DOM Syntax

object.style.minWidth = "50px"

CSS min-width Example

Here is another example demonstrating usage of different types of values in min-width property −

<html>
<head>
<style>
   .box1 {
      min-width: 300px;
      background-color: yellow;
      padding: 20px;
      margin-bottom: 5px;
   }
   .box2 {
      min-width: 30%;
      background-color: lightgrey;
      padding: 20px;
      display: inline-block;
      margin-bottom: 5px;
   }
</style>
</head>
<body>
   <div class="box1">This box has a minimum width of 300px</div>
   <div class="box2">This box has a minimum width of 30%.</div>
   <div class="box2">
      This box has a minimum width of 30%. But the content is larger than the min-width.
      Hence the value of min-width has no effect. This is a dimensional property which can be styled using CSS.
   </div>
</body>
</html>
Advertisements