width

  • Revision slug: CSS/width
  • Revision title: width
  • Revision id: 360514
  • Created:
  • Creator: paul.irish
  • Is current revision? No
  • Comment chrome support

Revision Content

{{ CSSRef }}

Summary

The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.

The {{ Cssxref("min-width") }} and {{ Cssxref("max-width") }} properties override {{ Cssxref("width") }}.

  • {{ Xref_cssinitial }} {{ cssinitial("width") }}
  • Applies to block level and replaced elements
  • {{ Xref_cssinherited }} no
  • Percentages refer to the width of the containing block
  • Media {{ Xref_cssvisual }}
  • Animatable yes, except from or to the auto value
  • {{ Xref_csscomputed }} the percentage or auto as specified or the absolute length

Syntax

Formal syntax: {{csssyntax("width")}}
width: 300px        /* <length> values */
width: 25em

width: 75%          /* <percentage> values */

width: border-box   /* Keyword values */
width: content-box
width: max-content
width: min-content
width: available
width: fit-content
width: auto

width: inherit

Values

<length>
See {{ Xref_csslength }} for possible units.
<percentage>
Specified as a {{ Xref_csspercentage }} of containing block's width.
border-box {{ experimental_inline }}
If present, the preceding {{ xref_csslength}} or {{ xref_csspercentage }} is applied to the element's border box.
content-box {{ experimental_inline }}
If present, the preceding {{ xref_csslength}} or {{ xref_csspercentage }} is applied to the element's content box.
auto
The browser will calculate and select a width for the specified element.
max-content {{ experimental_inline }}
The intrinsic preferred width.
Note: WebKit implements an earlier version of this value, under the name intrinsic.
min-content {{ experimental_inline }}
The intrinsic minimum width.
available {{ experimental_inline }}
The containing block width minus horizontal margin, border and padding.
fit-content {{ experimental_inline }}
The larger of:
  • the intrinsic minimum width
  • the smaller of the intrinsic preferred width and the available width

Examples

table { width: 100%; }

img   { width: 200px; }

form  { width: auto; }

p     { width: 40em; }

{{ CSSLiveSample("width.html") }}


p { background: gold }

The Mozilla community produces a lot of great software.


p {
  background: lightgreen;
  width: intrinsic;			/* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;	/* Firefox/Gecko */
}

The Mozilla community produces a lot of great software.


p { background: lightblue;  max-width: -moz-min-content; }

The Mozilla community produces a lot of great software.

Specifications

Specification Status Comment
{{ SpecName('CSS3 Box', '#the-width-and-height-properties', 'width') }} {{ Spec2('CSS3 Box') }} Added the max-content, min-content, available, fit-content, border-box, content-box keywords.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'width') }} {{ Spec2('CSS3 Transitions') }} Lists width as animatable.
{{ SpecName('CSS2.1', 'visudet.html#the-width-property', 'width') }} {{ Spec2('CSS2.1') }} Precises on which element it applies to.
{{ SpecName('CSS1', '#width', 'width') }} {{ Spec2('CSS1') }} Initial specification.

Browser compatibility

{{ CompatibilityTable }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatVersionUnknown }} {{ CompatGeckoDesktop("1.0") }} 4 3.5 1.0 (85)
Animatability{{ experimental_inline }} {{ CompatUnknown }} {{ CompatGeckoDesktop("16.0") }} {{ CompatUnknown }} {{ CompatUnknown }} {{ CompatUnknown }}
max-content{{ experimental_inline }} 22 {{ property_prefix("-webkit") }} {{ CompatGeckoDesktop("1.9") }}{{ property_prefix("-moz") }} {{ CompatUnknown }} {{ CompatUnknown }} 2.0 (421) (intrinsic value)
min-content{{ experimental_inline }} 22 {{ property_prefix("-webkit") }} {{ CompatGeckoDesktop("1.9") }} {{ property_prefix("-moz") }} {{ CompatUnknown }} {{ CompatUnknown }} {{ CompatUnknown }}
available{{ experimental_inline }} 22 {{ property_prefix("-webkit") }} {{ CompatGeckoDesktop("1.9") }} {{ property_prefix("-moz") }} {{ CompatUnknown }} {{ CompatUnknown }} {{ CompatUnknown }}
fit-content{{ experimental_inline }} 22 {{ property_prefix("-webkit") }} {{ CompatGeckoDesktop("1.9") }} {{ property_prefix("-moz") }} {{ CompatUnknown }} {{ CompatUnknown }} {{ CompatUnknown }}
border-box and content-box{{ experimental_inline }} {{ CompatNo }} {{ CompatNo }} {{ CompatNo }} {{ CompatNo }} {{ CompatNo }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown }} {{ CompatUnknown }} {{ CompatUnknown }} {{ CompatUnknown }} {{ CompatUnknown }}

See also

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

Revision Source

<div>
  {{ CSSRef }}</div>
<h2 id="Summary">Summary</h2>
<p>The <code>width</code> CSS property specifies the width of the content area of an element. The <a href="/en-US/docs/CSS/box_model#content" title="CSS/box_model#content">content area</a> is <em>inside</em> the padding, border, and margin of the element.</p>
<p>The {{ Cssxref("min-width") }} and {{ Cssxref("max-width") }} properties override {{ Cssxref("width") }}.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial }}</dfn> {{ cssinitial("width") }}</li>
  <li><dfn>Applies to</dfn> block level and replaced elements</li>
  <li><dfn>{{ Xref_cssinherited }}</dfn> no</li>
  <li><dfn>Percentages</dfn> refer to the width of the containing block</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual }}</li>
  <li><dfn>Animatable</dfn> yes, except from or to the <code>auto</code> value</li>
  <li><dfn>{{ Xref_csscomputed }}</dfn> the percentage or <code>auto</code> as specified or the absolute length</li>
</ul>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("width")}}</pre>
<pre>
width: 300px        /* &lt;length&gt; values */
width: 25em

width: 75%          /* &lt;percentage&gt; values */

width: border-box   /* Keyword values */
width: content-box
width: max-content
width: min-content
width: available
width: fit-content
width: auto

width: inherit
</pre>
<h3 id="Values" name="Values">Values</h3>
<dl>
  <dt>
    <code>&lt;length&gt;</code></dt>
  <dd>
    See {{ Xref_csslength }} for possible units.</dd>
  <dt>
    <code>&lt;percentage&gt;</code></dt>
  <dd>
    Specified as a {{ Xref_csspercentage }} of containing block's width.</dd>
  <dt>
    <code>border-box </code>{{ experimental_inline }}</dt>
  <dd>
    If present, the preceding {{ xref_csslength}} or {{ xref_csspercentage }} is applied to the element's border box.</dd>
  <dt>
    <code>content-box</code> {{ experimental_inline }}</dt>
  <dd>
    If present, the preceding {{ xref_csslength}} or {{ xref_csspercentage }} is applied to the element's content box.</dd>
  <dt>
    <code>auto</code></dt>
  <dd>
    The browser will calculate and select a width for the specified element.</dd>
  <dt>
    <code>max-content</code> {{ experimental_inline }}</dt>
  <dd>
    The intrinsic preferred width.
    <div class="note">
      <strong>Note:</strong> WebKit implements an earlier version of this value, under the name <code>intrinsic</code>.</div>
  </dd>
  <dt>
    <code>min-content</code> {{ experimental_inline }}</dt>
  <dd>
    The intrinsic minimum width.</dd>
  <dt>
    <code>available</code> {{ experimental_inline }}</dt>
  <dd>
    The containing block width minus horizontal margin, border and padding.</dd>
  <dt>
    <code>fit-content</code> {{ experimental_inline }}</dt>
  <dd>
    The larger of:
    <ul>
      <li>the intrinsic minimum width</li>
      <li>the smaller of the intrinsic preferred width and the available width</li>
    </ul>
  </dd>
</dl>
<h2 id="Examples" name="Examples">Examples</h2>
<pre class="brush:css">
table { width: 100%; }

img   { width: 200px; }

form  { width: auto; }

p     { width: 40em; }</pre>
<p>{{ CSSLiveSample("width.html") }}</p>
<hr />
<pre class="brush:css">
p { background: gold }</pre>
<p style="background:gold">The Mozilla community produces a lot of great software.</p>
<hr />
<pre class="brush:css;">
p {
  background: lightgreen;
  width: intrinsic;			/* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;	/* Firefox/Gecko */
}</pre>
<p style="background:lightgreen; width: intrinsic; width:-moz-max-content;">The Mozilla community produces a lot of great software.</p>
<hr />
<pre class="brush:css">
p { background: lightblue;  max-width: -moz-min-content; }</pre>
<p style="background:lightblue; width:-moz-min-content">The Mozilla community produces a lot of great software.</p>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Box', '#the-width-and-height-properties', 'width') }}</td>
      <td>{{ Spec2('CSS3 Box') }}</td>
      <td>Added the <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code>, <code>content-box</code> keywords.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'width') }}</td>
      <td>{{ Spec2('CSS3 Transitions') }}</td>
      <td>Lists <code>width</code> as animatable.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS2.1', 'visudet.html#the-width-property', 'width') }}</td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>Precises on which element it applies to.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS1', '#width', 'width') }}</td>
      <td>{{ Spec2('CSS1') }}</td>
      <td>Initial specification.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown }}</td>
        <td>{{ CompatGeckoDesktop("1.0") }}</td>
        <td>4</td>
        <td>3.5</td>
        <td>1.0 (85)</td>
      </tr>
      <tr>
        <td>Animatability{{ experimental_inline }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatGeckoDesktop("16.0") }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
      </tr>
      <tr>
        <td><code>max-content</code>{{ experimental_inline }}</td>
        <td>22&nbsp;{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatGeckoDesktop("1.9") }}{{ property_prefix("-moz") }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>2.0 (421) (<code>intrinsic</code> value)</td>
      </tr>
      <tr>
        <td><code>min-content</code>{{ experimental_inline }}</td>
        <td>22&nbsp;{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatGeckoDesktop("1.9") }} {{ property_prefix("-moz") }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
      </tr>
      <tr>
        <td><code>available</code>{{ experimental_inline }}</td>
        <td>22&nbsp;{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatGeckoDesktop("1.9") }} {{ property_prefix("-moz") }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
      </tr>
      <tr>
        <td><code>fit-content</code>{{ experimental_inline }}</td>
        <td>22&nbsp;{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatGeckoDesktop("1.9") }} {{ property_prefix("-moz") }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
      </tr>
      <tr>
        <td><code>border-box</code> and <code>content-box</code>{{ experimental_inline }}</td>
        <td>{{ CompatNo }}</td>
        <td>{{ CompatNo }}</td>
        <td>{{ CompatNo }}</td>
        <td>{{ CompatNo }}</td>
        <td>{{ CompatNo }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/CSS/box_model" title="CSS/box_model">box model</a>, {{ Cssxref("height") }}, {{ Cssxref("box-sizing") }}, {{ Cssxref("min-width") }}, {{ Cssxref("max-width") }}</li>
</ul>
Revert to this revision