width
=====

The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area.

Try it
------

The specified value of `width` applies to the content area so long as its value remains within the values defined by `min-width` and `max-width`.

* If the value for `width` is less than the value for `min-width`, then `min-width` overrides `width`.
* If the value for `width` is greater than the value for `max-width`, then `max-width` overrides `width`.
Syntax
------


```css
/\* <length> values \*/
width: 300px;
width: 25em;

/\* <percentage> value \*/
width: 75%;

/\* Keyword values \*/
width: max-content;
width: min-content;
width: fit-content;
width: fit-content(20em);
width: auto;

/\* Global values \*/
width: inherit;
width: initial;
width: revert;
width: revert-layer;
width: unset;
```

### Values

`<length>`

Defines the width as a distance value.

`<percentage>`

Defines the width as a percentage of the containing block's width.

`auto`

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

`max-content`

The intrinsic preferred width.

`min-content`

The intrinsic minimum width.

`fit-content`

Use the available space, but not more than max-content, i.e `min(max-content, max(min-content, stretch))`.

`fit-content(`<length-percentage>`)` 
Experimental

Uses the fit-content formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, <length-percentage>))`.

Accessibility concerns
----------------------

Ensure that elements set with a `width` aren't truncated and/or don't obscure other content when the page is zoomed to increase text size.

* MDN Understanding WCAG, Guideline 1.4 explanations
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements but non-replaced inline elements, table rows, and row groups |
| Inherited | no |
| Percentages | refer to the width of the containing block |
| Computed value | a percentage or `auto` or the absolute length |
| Animation type | a length, percentage or calc(); |

Formal syntax
-------------
```

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

Examples
--------

### Default width


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



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

### Example using pixels and ems


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

### Example with percentage


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



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

### Example using "max-content"


```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 \*/
  width: max-content;
}
```



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

### Example using "min-content"


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



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

Specifications
--------------

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

Browser compatibility
---------------------

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

See also
--------

* The box model
* `height`
* `box-sizing`
* `min-width`, `max-width`
* The mapped logical properties: `block-size`, `inline-size`