CSS/Properties/max-width

From Web Education Community Group
Jump to: navigation, search

max-width

The max-width property allow authors to constrain content widths to a certain range.

Description

Values <length> | <percentage> | none | inherit
Initial value none
Applies to All elements but non-replaced inline elements, table rows, and row groups
Inherited No


Values

  • <length>
    Specifies a fixed maximum used width.


  • <percentage>
    Specifies a percentage for determining the used value. The percentage is calculated with respect to the width of the generated box's containing block.


  • none
    No limit on the width of the box.


  • inherit
    Takes the same specified value as the property for the element's parent.


Example

Example A

[style.css]

 p {
   width: auto;
   min-width: 200px;
   max-width: 600px;
   height: 200px;
   background-color: #ccc;
 }

[index.html]

<body>
  <p>This is a paragraph.</p>
</body>


CSS Reference

The CSS specification defines the max-width property in 10.4 Minimum and maximum widths.