width
=====

The **`width`** CSS property specifies the width of an element. By default, the property defines the width of the content area (en-US). If `box-sizing` is set to `border-box`, however, it instead determines the width of the border area (en-US).


```css
/\* <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;
```

Examples
--------
```

<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>
```


```
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: 0.5em;
  padding: 0.5em;
  background-color: #fff;
  overflow: hidden;
  text-align: left;
  font-style: italic;
}

p {
  font-size: 1rem;
  font-style: normal;
  background: #e4f0f5;
  padding: 0.5em;
  margin: 0.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;
}
```


**備註：** `min-width` (en-US) 和 `max-width` (en-US) 會覆寫 `width`.

|  |  |
| --- | --- |
| 預設值 (en-US) | `auto` |
| Applies to | all elements but non-replaced inline elements, table rows, and row groups |
| 繼承與否 | no |
| Percentages | refer to the width of the containing block |
| Computed value (en-US) | a percentage or `auto` or the absolute length |
| Animation type | a length, percentage or calc(); |

Syntax
------

The `width` property is specified as either:

* one of the following keyword values: `available`, `min-content`, `max-content`, `fit-content`, `auto`.
* a `<length>` or a `<percentage>`. This may optionally be followed by one of the following keywords: `border-box`, `content-box`.
### Values

`<length>` (en-US)

Defines the width as an absolute value.

`<percentage>` (en-US)

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.

`border-box`
實驗性質

If present, the preceding `<length>` (en-US) or `<percentage>` (en-US) is applied to the element's border box.

`content-box` 
實驗性質

If present, the preceding `<length>` (en-US) or `<percentage>` (en-US) is applied to the element's content box.

`auto`

The browser will calculate and select a width for the specified element.

`fill` 
實驗性質

Use the `fill-available` inline size or `fill-available` block size, as appropriate to the writing mode.

`max-content` 
實驗性質

The intrinsic preferred width.

`min-content` 
實驗性質

The intrinsic minimum width.

`available` 
實驗性質

The containing block width minus horizontal margin, border and padding.

`fit-content` 
實驗性質

The larger of: the intrinsic minimum width

* the smaller of the intrinsic preferred width and the available width

### Formal syntax
```

width =   
  auto                                      | (en-US)  
  <length-percentage [0,∞]>                 | (en-US)  
  min-content                               | (en-US)  
  max-content                               | (en-US)  
  fit-content( <length-percentage [0,∞]> )    
  
<length-percentage> =   
  <length> (en-US)      | (en-US)  
  <percentage> (en-US)    
  
```

範例
--

### 預設寬度


```css
p.goldie {
  background: gold;
}
```



```html
<p class="goldie">The Mozilla community produces a lot of great software.</p>
```

### 像素和相對大小


```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;
}
```



```html
<div class="px\_length">Width measured in px</div>
<div class="em\_length">Width measured in em</div>
```

### 百分比


```css
.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}
```



```html
<div class="percent">Width in percentage</div>
```

### 內容最大值


```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 \*/
}
```



```html
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>
```

### 內容最小值


```css
p.minblue {
  background: lightblue;
  width: -moz-min-content; /\* Firefox \*/
  width: -webkit-min-content; /\* Chrome \*/
}
```



```html
<p class="minblue">The Mozilla community produces a lot of great software.</p>
```

規範
--

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # width-height-keywords |
| CSS Box Sizing Module Level 4 # sizing-values |

瀏覽器相容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

參考
--

* box model (en-US), `height`, `box-sizing`, `min-width` (en-US), `max-width` (en-US)