min-width - HTML CSS CSS Property

HTML CSS examples for CSS Property:min-width

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. min-width

Description

The min-width CSS property sets the minimum width of the content area of an element.

This minimum width does not include padding, borders, or margins.

The following table summarizes the min-width Property.

Item Value
Default value: 0
Applies to:All elements except non-replaced inline elements, table rows, and row groups
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 


min-width:      length | percentage | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
length Set the minimum width as a length value in px, pt, cm, em, etc. Negative length values are not allowed.
percentage Set the minimum width in percentage. The percentage is calculated against the width of the element's containing block. Negative percentage values are not allowed.
initialSets this property to its default value.
inherittake the value of its parent element min-width property.

The example below shows the min-width property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS min-width property</title>
  <style type="text/css">
    div {<!--from  ww  w . ja v  a2  s .co  m-->
        width: 300px;
        min-width: 400px;
        background: #FFC0CB;
    }
    p {
        min-width: 400px;
        display: inline-block;
        background: #F0E68C;
    }
</style>
 </head>
 <body>
  <p>Enter some text to see how it works.</p>
  <div>
   The minimum width of this div element is set to 400px, so it can't be narrower than that.
  </div>
 </body>
</html>

Related Tutorials