mozilla

Revision 25733 of max-width

  • Revision slug: CSS/max-width
  • Revision title: max-width
  • Revision id: 25733
  • Created:
  • Creator: killerog
  • Is current revision? No
  • Comment 1 words added, 1 words removed; page display name changed to 'max-width'

Revision Content

{{ CSSRef() }}

Summary

The max-width property is used to set the maximum width of a given element. It prevents the used value of the {{ Cssxref("width") }} property from becoming larger than the value specified for max-width.

  • {{ Xref_cssinitial() }}: {{ Cssxref("none") }}
  • Applies to: block level and replaced elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: refer to the width of the containing block
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}:

Syntax

max-width: <length> | <percentage> | none | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available

Values

  • none : the {{ Cssxref("width") }} has no maximum value
  • length : can be in px, cm, in
  • percentage : % specified as a percentage of containing block's width
  • -moz-max-content : the intrinsic preferred width {{ Fx_minversion_inline("3") }}
  • -moz-min-content : the intrinsic minimum width {{ Fx_minversion_inline("3") }}
  • -moz-available : the containing block width minus horizontal margin, border, and padding {{ Fx_minversion_inline("3") }}
  • -moz-fit-content : the same as -moz-max-content {{ Fx_minversion_inline("3") }}

Examples

{{ CSSRefExampleLink("max-width") }}

table{max-width: 75%;}

form{max-width: none;}

Notes

{{ Cssxref("max-width") }} overrides width, but {{ Cssxref("min-width") }} overrides {{ Cssxref("max-width") }}.

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer 7
Netscape 6
Opera 3.5

See also

box model, {{ Cssxref("max-height") }}, {{ Cssxref("-moz-box-sizing") }}, {{ Cssxref("width") }}, {{ Cssxref("min-width") }}

 

{{ languages( { "es": "es/CSS/max-width", "fr": "fr/CSS/max-width" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>The <code>max-width</code> property is used to set the maximum width of a given element. It prevents the used value of the {{ Cssxref("width") }} property from becoming larger than the value specified for <code>max-width</code>.</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li> <li>Applies to: block level and replaced elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: refer to the width of the containing block</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}:</li>
</ul>
<h3 name="Syntax">Syntax</h3>
<p>max-width: &lt;length&gt; | &lt;percentage&gt; | none | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available</p>
<h3 name="Values">Values</h3>
<ul> <li><strong>none</strong> : the {{ Cssxref("width") }} has no maximum value</li> <li><strong>length</strong> : can be in px, cm, in</li> <li><strong>percentage</strong> : % specified as a percentage of containing block's width</li> <li><strong>-moz-max-content</strong> : the intrinsic preferred width {{ Fx_minversion_inline("3") }}</li> <li><strong>-moz-min-content</strong> : the intrinsic minimum width {{ Fx_minversion_inline("3") }}</li> <li><strong>-moz-available</strong> : the containing block width minus horizontal margin, border, and padding {{ Fx_minversion_inline("3") }}</li> <li><strong>-moz-fit-content</strong> : the same as <code>-moz-max-content</code> {{ Fx_minversion_inline("3") }}</li>
</ul>
<h3 name="Examples">Examples</h3>
<p>{{ CSSRefExampleLink("max-width") }}</p>
<pre>table{max-width: 75%;}

form{max-width: none;}
</pre>
<h3 name="Notes">Notes</h3>
<p>{{ Cssxref("max-width") }} overrides width, but {{ Cssxref("min-width") }} overrides {{ Cssxref("max-width") }}.</p>
<h3 name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS2/visudet.html#min-max-widths">CSS 2.1</a></li>
</ul>
<h3 name="Browser_compatibility">Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>7</td> </tr> <tr> <td>Netscape</td> <td>6</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> </tbody>
</table>
<h3 name="See_also">See also</h3>
<p><a href="/en/CSS/box_model" title="en/CSS/box_model">box model</a>, {{ Cssxref("max-height") }}, {{ Cssxref("-moz-box-sizing") }}, {{ Cssxref("width") }}, {{ Cssxref("min-width") }}</p>
<p> </p>

<p>{{ languages( { "es": "es/CSS/max-width", "fr": "fr/CSS/max-width" } ) }}</p>
Revert to this revision