width
=====

Resumo
------

A propriedade CSS **width** determina a largura da área de conteúdo de um elemento. A área de conteúdo fica dentro do preenchimento, da borda, e da margem de um elemento.

As propriedades `min-width` (en-US) e `max-width` sobrescrevem o `width`.

|  |  |
| --- | --- |
| Initial value | `auto` |
| Aplica-se a | all elements but non-replaced inline elements, table rows, and row groups |
| Inherited | não |
| 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(); |

Sintaxe
-------


```css
/\* Valores de largura - <length> \*/
width: 300px;
width: 25em;

/\* Valores percentuais - <percentage> \*/
width: 75%;

/\* Valores com palavras-chave \*/
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;

/\* Valores Globais \*/
width: inherit;
width: initial;
width: unset;
```

### Valores

`<length>`

Veja `<length>` (en-US) para possíveis unidades.

`<percentage>`

Especificado como `<percentage>` (en-US) da largura do bloco contido. Se a largura do bloco contido depender da largura do elemento, o layout resultante é indefinido.

`border-box` 
Experimental

Se presente, o precedente `<length>` (en-US) ou `<percentage>` (en-US) é aplicado para o border box do elemento.

`content-box` 
Experimental

Se presente, o precedente `<length>` (en-US) ou `<percentage>` (en-US) é aplicado para o content box do elemento.

`auto`

O navegador irá calcular e selecionar a largura para o elemento específicado.

fill 
Experimental

Use o fill-available inline size ou fill-available block size, como um modo apropriado de escrita.

`max-content` 
Experimental

Da largura interna preferível.

`min-content` 
Experimental

Da largura interna mínina.

`available` 
Experimental

Do bloco contendo a largura menos a margin horizontal, borda ou preenchimento.

`fit-content` 
Experimental

A largura:

* do comprimento interno mínimo.
* do menor comprimento interno preferível e da largura disponível.

### Sintaxe Formal
```

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

Exemplos
--------

### Largura padrão


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



```html
<p class="douradinho">
  A comunidade Mozilla produz diversos softwares incríveis.
</p>
```

### Pixels e ems


```css
.largura\_px {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.largura\_em {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}
```



```html
<div class="largura\_px">Largura medida com px</div>
<div class="largura\_em">Largura medida com em</div>
```

### Porcentagem


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



```html
<div class="porcentagem">Largura em porcentagem</div>
```

### Exemplo utilizando "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 \*/
}
```



```html
<p class="maxgreen">
  A comunidade Mozilla produz diversos softwares incríveis.
</p>
```

### Exemplo utilizando "min-content"


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



```html
<p class="minblue">A comunidade Mozilla produz diversos softwares incríveis.</p>
```

Especificações
--------------

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

Compatibilidade com navegadores
-------------------------------

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

Veja também
-----------

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