Min-width

CSS min-width property sets the minimum width of an element. By using this property, we prevent the width property's value from becoming smaller than the value specified for min-width.

Meanwhile, we must know that CSS min-width property overrides width property and CSS max-width property.

The property takes a CSS length (px, pt, em, and so on), or a percentage. Negative length values are illegal.

CSS Syntax

min-width: length | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
      <style>
        div {
             min-width: 15%;
             background-color: orange;
         }
      </style>
   </head>
   <body>

        <div>We set the minimum width of this text as 15%.</div>

   </body>
</html>

Here the result is:



Property Values

Value Descriptions
length It defines minimum width in px, pt, cm, etc.
% It defines minimum width in percent of the containing element.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.




Related articles