CSS - min-width Property

Quiz

CSS min-width property sets the minimum width of an element. If the content exceeds the minimum width, the element will expand to accommodate the content. If the content fits within the specified minimum width, there is no effect on the element's size.

Syntax

min-width: length | percentage | initial | inherit;

Property Values

Value	Description
length	The minimum width of an element is set using length units (e.g. px, em, rem etc.). Default is 0.
percentage	The minimum width of an element is set using percentage values (e.g. 10%) relative to the size of the container.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Min Width Property

The following examples explain the min-width property with different values.

Min Width Property with Length Values

To set the minimum limit on the width of an element, we can specify the minimum width value using length units (e.g. px, em, rem etc.). If the content is larger than the min-width, the element expands to accomdate the content. If the content is smaller than the min-width, the space is visible. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         padding: 5px;
         background-color: lightgreen;
      }

      .display {
         display: inline-block;
      }

      .ex1 {
         min-width: 400px;
      }

      .ex2 {
         min-width: 30em;
      }
   </style>
</head>
<body>
   <h2>
      CSS min-width property
   </h2>
   <h4>
      min-width: 400px (the minimum width is 400px, 
      if content is larger, the height will increase.)
   </h4>
   <span class="container ex1 display">
      TutorialsPoint provides extensive online tutorials
   </span>
   <br/>
   <h4>
      min-width: 30em (the minimum width is 30em, 
      if content is larger, the height will increase.)
   </h4>
   <span class="container ex2 display">
      TutorialsPoint provides extensive online tutorials
   </span>
</body>
</html>

Min Width Property with Percentage Values

To set the minimum limit on the width of an element, we can specify the minimum width value using percentage values (e.g. 10%) relative to the size of the containing element. If the content is larger than the min-width, the element expands to accomdate the content. If the content is smaller than the min-width, the space is visible. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .props {
         display: inline-block;
         padding: 15px;
         background-color: lightgreen;
      }

      .ex1 {
         min-width: 70%;
      }

      .ex2 {
         min-width: 90%;
      }
   </style>
</head>
<body>
   <h2>
      CSS min-width property
   </h2>
   <h4>
      min-width: 70% (the minimum width is 70% of 
      the body's width, height increases, if content 
      is larger than the min-width)
   </h4>

   <span class="ex1 props">
      TutorialsPoint provides extensive online tutorials
   </span>
   <br/>
   <h4>
      min-width: 90% (the minimum width is 90% of 
      the body's width, height increases, if content 
      is larger than the min-width)
   </h4>

   <span class="ex2 props">
      TutorialsPoint provides extensive online tutorials
   </span>
</body>
</html>

Supported Browsers

Property
min-width	1.0	7.0	1.0	2.0.2	7.0

css_reference.htm

Print Page