---
title: width
slug: Web/CSS/width
translation_of: Web/CSS/width
---
<div>{{CSSRef}}</div>
<p>The <strong><code>width</code></strong> CSS property specifies the width of an element. By default, the property defines the width of the <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">content area</a>. If {{cssxref("box-sizing")}} is set to <code>border-box</code>, however, it instead determines the width of the <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border-area">border area</a>.</p>
<pre class="brush:css no-line-numbers">/* <length> values */
width: 300px;
width: 25em;
/* <percentage> value */
width: 75%;
/* Keyword values */
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;
/* Global values */
width: inherit;
width: initial;
width: unset;
</pre>
<div class="hidden" id="width">
<pre class="brush: html"><div class="grid">
<div class="col">
<div class="cell">
&lt;length&gt; values
<p class="w1">width: 150px</p>
<p class="w2">width: 20em</p>
<p class="w3 warning" title="this feature is experimental and might not work in your browser">width: 20em content-box</p>
<p class="w4 warning" title="this feature is experimental and might not work in your browser">width: 20em border-box</p>
</div>
<div class="cell">
&lt;percentage&gt; values
<p class="w5">width: 75%</p>
<p class="w6 warning" title="this feature is experimental and might not work in your browser">width: 75% content-box</p>
<p class="w7 warning" title="this feature is experimental and might not work in your browser">width: 75% border-box</p>
</div>
<div class="cell">
Keyword values
<p>width: auto</p>
<p class="w8 warning" title="this feature is experimental and might not work in your browser">width: max-content</p>
<p class="w9 warning" title="this feature is experimental and might not work in your browser">width: min-content</p>
<p class="w10 warning" title="this feature is experimental and might not work in your browser">width: available</p>
<p class="w11 warning" title="this feature is experimental and might not work in your browser">width: fit-content</p>
</div>
</div>
</div></pre>
<p>sd</p>
<pre class="brush: css">html,body {
height: 100%;
box-sizing: border-box;
}
.grid {
width: 100%;
height: 100%;
display: flex;
background: #EEE;
font: 1em monospace;
}
.col {
display: flex;
flex: 1 auto;
flex-direction: column;
}
.cell {
margin: .5em;
padding: .5em;
background-color: #FFF;
overflow: hidden;
text-align: left;
font-style: italic;
}
p {
font-size: 1rem;
font-style: normal;
background: #E4F0F5;
padding: .5em;
margin: .5em;
}
.warning {
background: #E4E4E4;
}
.warning:before {
content: "⚠️ ";
}
/* values */
.w1 { width: 150px; }
.w2 { width: 20em; }
.w3 { width: 20em content-box; }
.w4 { width: 20em border-box; }
/* value */
.w5 { width: 75%; }
.w6 { width: 75% content-box; }
.w7 { width: 75% border-box; }
/* Keyword values (mostly experimental) */
.w8 { width: max-content; }
.w9 { width: min-content; }
.w10 { width: available; }
.w11 { width: fit-content; }</pre>
</div>
<div>{{EmbedLiveSample("width", "100%", 660, "", "", "example-outcome-frame")}}</div>
<div class="note">
<p><strong>注意：</strong> {{cssxref("min-width")}} 和 {{cssxref("max-width")}} 會覆寫 {{cssxref("width")}}.</p>
</div>
<div>{{cssinfo}}</div>
<h2 id="Syntax">Syntax</h2>
<p>The <code>width</code> property is specified as either:</p>
<ul>
<li>one of the following keyword values: <code><a href="#available">available</a></code>, <code><a href="#min-content">min-content</a></code>, <code><a href="#max-content">max-content</a></code>, <code><a href="#fit-content">fit-content</a></code>, <code><a href="#auto">auto</a></code>.</li>
<li>a <code><a href="#<length>"><length></a></code> or a <code><a href="#<percentage>"><percentage></a></code>. This may optionally be followed by one of the following keywords: <code><a href="#border-box">border-box</a></code>, <code><a href="#content-box">content-box</a></code>.</li>
</ul>
<h3 id="Values">Values</h3>
<dl>
<dt><a id="<length>" name="<length>">{{cssxref("<length>")}}</a></dt>
<dd>Defines the width as an absolute value.</dd>
<dt><a id="<percentage>" name="<percentage>">{{cssxref("<percentage>")}}</a></dt>
<dd>Defines the width as a percentage of the containing block's width. If the width of the containing block depends on the width of the element, the resulting layout is undefined.</dd>
<dt><code><a id="border-box" name="border-box">border-box</a> </code>{{experimental_inline}}</dt>
<dd>If present, the preceding {{cssxref("<length>")}} or {{cssxref("<percentage>")}} is applied to the element's border box.</dd>
<dt><a id="content-box" name="content-box"><code>content-box</code></a> {{experimental_inline}}</dt>
<dd>If present, the preceding {{cssxref("<length>")}} or {{cssxref("<percentage>")}} is applied to the element's content box.</dd>
<dt><a id="auto" name="auto"><code>auto</code></a></dt>
<dd>The browser will calculate and select a width for the specified element.</dd>
<dt><a id="fill" name="fill"><code>fill</code></a> {{experimental_inline}}</dt>
<dd>Use the <code>fill-available</code> inline size or <code>fill-available</code> block size, as appropriate to the writing mode.</dd>
<dt><a id="max-content" name="max-content"><code>max-content</code></a> {{experimental_inline}}</dt>
<dd>The intrinsic preferred width.</dd>
<dt><a id="min-content" name="min-content"><code>min-content</code></a> {{experimental_inline}}</dt>
<dd>The intrinsic minimum width.</dd>
<dt><a id="available" name="available"><code>available</code></a> {{experimental_inline}}</dt>
<dd>The containing block width minus horizontal margin, border and padding.</dd>
<dt id="fit-content"><a id="fit-content" name="fit-content"><code>fit-content</code></a> {{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>
<h3 id="Formal_syntax">Formal syntax</h3>
{{csssyntax}}
<h2 id="範例">範例</h2>
<h3 id="預設寬度">預設寬度</h3>
<pre class="brush:css">p.goldie {
background: gold;
}</pre>
<pre class="brush:html"><p class="goldie">The Mozilla community produces a lot of great software.</p></pre>
<p>{{EmbedLiveSample('Default_width', '500px', '64px')}}</p>
<h3 id="像素和相對大小">像素和相對大小</h3>
<pre class="brush: css">.px_length {
width: 200px;
background-color: red;
color: white;
border: 1px solid black;
}
.em_length {
width: 20em;
background-color: white;
color: red;
border: 1px solid black;
}
</pre>
<pre class="brush: html"><div class="px_length">Width measured in px</div>
<div class="em_length">Width measured in em</div></pre>
<p>{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}</p>
<h3 id="百分比">百分比</h3>
<pre class="brush: css">.percent {
width: 20%;
background-color: silver;
border: 1px solid red;
}</pre>
<pre class="brush: html"><div class="percent">Width in percentage</div></pre>
<p>{{EmbedLiveSample('Percentage', '500px', '64px')}}</p>
<h3 id="內容最大值">內容最大值</h3>
<pre class="brush:css;">p.maxgreen {
background: lightgreen;
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
}</pre>
<pre class="brush:html"><p class="maxgreen">The Mozilla community produces a lot of great software.</p></pre>
<p>{{EmbedLiveSample('max-content_2', '500px', '64px')}}</p>
<h3 id="內容最小值">內容最小值</h3>
<pre class="brush:css">p.minblue {
background: lightblue;
width: -moz-min-content; /* Firefox */
width: -webkit-min-content; /* Chrome */
}</pre>
<pre class="brush:html"><p class="minblue">The Mozilla community produces a lot of great software.</p></pre>
<p>{{EmbedLiveSample('min-content_2', '500px', '155px')}}</p>
<h2 id="規範">規範</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 definition.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
<td>{{Spec2('CSS3 Sizing')}}</td>
<td>Adds new sizing keywords for width and height.</td>
</tr>
</tbody>
</table>
<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
<p>{{Compat("css.properties.width")}}</p>
<h2 id="參考">參考</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">box model</a>, {{cssxref("height")}}, {{cssxref("box-sizing")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}</li>
</ul>