path: root/files/zh-tw/web/css/width/index.html

---
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">/* &lt;length&gt; values */
width: 300px;
width: 25em;

/* &lt;percentage&gt; 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">&lt;div class="grid"&gt;
  &lt;div class="col"&gt;
    &lt;div class="cell"&gt;
      &amp;lt;length&amp;gt; values
      &lt;p class="w1"&gt;width: 150px&lt;/p&gt;
      &lt;p class="w2"&gt;width: 20em&lt;/p&gt;
      &lt;p class="w3 warning" title="this feature is experimental and might not work in your browser"&gt;width: 20em content-box&lt;/p&gt;
      &lt;p class="w4 warning" title="this feature is experimental and might not work in your browser"&gt;width: 20em border-box&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      &amp;lt;percentage&amp;gt; values
      &lt;p class="w5"&gt;width: 75%&lt;/p&gt;
      &lt;p class="w6 warning" title="this feature is experimental and might not work in your browser"&gt;width: 75% content-box&lt;/p&gt;
      &lt;p class="w7 warning" title="this feature is experimental and might not work in your browser"&gt;width: 75% border-box&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="cell"&gt;
      Keyword values
      &lt;p&gt;width: auto&lt;/p&gt;
      &lt;p class="w8 warning" title="this feature is experimental and might not work in your browser"&gt;width: max-content&lt;/p&gt;
      &lt;p class="w9 warning" title="this feature is experimental and might not work in your browser"&gt;width: min-content&lt;/p&gt;
      &lt;p class="w10 warning" title="this feature is experimental and might not work in your browser"&gt;width: available&lt;/p&gt;
      &lt;p class="w11 warning" title="this feature is experimental and might not work in your browser"&gt;width: fit-content&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</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="#&lt;length>">&lt;length&gt;</a></code> or a <code><a href="#&lt;percentage>">&lt;percentage&gt;</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="&lt;length>" name="&lt;length>">{{cssxref("&lt;length&gt;")}}</a></dt>
 <dd>Defines the width as an absolute value.</dd>
 <dt><a id="&lt;percentage>" name="&lt;percentage>">{{cssxref("&lt;percentage&gt;")}}</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("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}} 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("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}} 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">&lt;p class="goldie"&gt;The Mozilla community produces a lot of great software.&lt;/p&gt;</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">&lt;div class="px_length"&gt;Width measured in px&lt;/div&gt;
&lt;div class="em_length"&gt;Width measured in em&lt;/div&gt;</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">&lt;div class="percent"&gt;Width in percentage&lt;/div&gt;</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">&lt;p class="maxgreen"&gt;The Mozilla community produces a lot of great software.&lt;/p&gt;</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">&lt;p class="minblue"&gt;The Mozilla community produces a lot of great software.&lt;/p&gt;</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>