CSS Property max-width








max-width sets a maximum constraint on the width of the element.

Summary

ItemValue
Initial value none
Inherited No.
Version CSS2
JavaScript syntax object.style.maxWidth="10px"
Applies to All elements except inline nonreplaced elements and table elements.




CSS Syntax

max-width: length | percentage | inherit 

Property Values

The property values are listed in the following table.

ValueDescription
auto Default value. The browser does the calculation.
length Set width in px, cm, etc.
% Set width in percent of the containing element
inherit Inherit the width property from the parent element

Browser compatibility

max-width Yes Yes Yes Yes Yes




Example

An example showing how to use max-width CSS property.

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <style type='text/css'>
      p {<!-- w ww. j a  va  2s .c  om-->
          padding: 10px;
          margin: 10px;
          border: thin solid black;
          width: auto;
          max-width: 500px;
      }
        </style>
    </head>
    <body>
    <p>
        This is a test. This is a test. 
    </p>
    </body>
</html>

Click to view the demo