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 e max-width sobrescrevem o width.

Initial valueauto
Aplica-se aall elements but non-replaced inline elements, table rows, and row groups
Inheritednão
Percentagesrefer to the width of the containing block
Midiavisual
Computed valuea percentage or auto or the absolute length
Animation typea length, percentage or calc();
Canonical orderthe length or percentage before the keyword, if both are present

Sintaxe

/* 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> para possíveis unidades.
<percentage>
Especificado como <percentage> da largura do bloco contido. Se a largura do bloco contido depender da largura do elemento, o layout resultante é indefinido.
border-box
Se presente, o precedente <length> ou <percentage> é aplicado para o border box do elemento.
content-box
Se presente, o precedente <length> ou <percentage> é aplicado para o content box do elemento.
auto
O navegador irá calcular e selecionar a largura para o elemento específicado.
fill
Use o fill-available inline size ou fill-available block size, como um modo apropriado de escrita.
max-content
Da largura interna preferível.
min-content
Da largura interna mínina.
available
Do bloco contendo a largura menos a margin horizontal, borda ou preenchimento.
fit-content
A largura:
  • do comprimento interno mínimo.
  • do menor comprimento interno preferível e da largura disponível.

Sintaxe Formal

[ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto

Exemplos

Largura padrão

p.douradinho {
  background: gold;
}
<p class="douradinho">A comunidade Mozilla produz diversos softwares incríveis.</p>

Pixels e ems

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

<div class="largura_px">Largura medida com px</div>
<div class="largura_em">Largura medida com em</div>

Porcentagem

.porcentagem {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}
<div class="porcentagem">Largura em porcentagem</div>

max-content

p.maxgreen {
  background: lightgreen;
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}
<p class="maxgreen">A comunidade Mozilla produz diversos softwares incríveis.</p>

min-content

p.minblue {
  background: lightblue;
  width: -moz-min-content;    /* Firefox */
  width: -webkit-min-content; /* Chrome */
}
<p class="minblue">A comunidade Mozilla produz diversos softwares incríveis.</p>

Especificações

Especificação Status Comentários
CSS Basic Box Model
The definition of 'width' in that specification.		 Rascunho atual Adicionadas as palavras-chave max-content, min-content, available, fit-content, border-box, content-box
CSS Transitions
The definition of 'width' in that specification.		 Rascunho atual Lista a largura como animável.
CSS Level 2 (Revision 1)
The definition of 'width' in that specification.		 Recomendação Determina em qual elemento vai ser aplicado.
CSS Level 1
The definition of 'width' in that specification.		 Recomendação Definição inicial
CSS Intrinsic & Extrinsic Sizing Module Level 3
The definition of 'width' in that specification.		 Rascunho atual Adiciona novas palavras-chave para largura e altura.

Compatibilidade dos navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

Características Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suporte básico (Yes) 1.0 (1.7 or earlier) 4 3.5 1.0 (85)
Animação ? 16.0 (16.0) ? ? ?
max-content 22.0 -webkit
46.0 [1]		 3.0 (1.9)-moz ? 15 -webkit 2.0 (421) (intrinsic value)
6.1 -webkit
min-content

22.0 [4] -webkit
46.0 [1]

 3.0 (1.9) -moz ? 15 -webkit 2.0 (421) (min-intrinsic value)
6.1 -webkit
available Não suportado 3.0 (1.9) -moz ? ? ?[1]
fill-available 22.0 -webkit Não suportado ? ? 6.1 -webkit
fit-content 22.0 [4] -webkit
46.0 [1]		 3.0 (1.9) -moz ? 15 -webkit 6.1 -webkit[2]
border-box e content-box Não suportado Não suportado Não suportado Não suportado Não suportado
fill 46.0        
Características Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome para Android
Suporte básico ? (Yes) ? ? ? ? (Yes)
Animação ? ? 16.0 (16.0) ? ? ? ?
max-content Não suportado 46.0 [1] ? ? ? ? 46.0 [1]
min-content Não suportado 46.0 [1] ? ? ? ? 46.0 [1]
available ? ? ? ? ? ? ?
fill-available Não suportado 46.0 [1] ? ? ? ? 46.0 [1]
fit-content Não suportado 46.0 [1] ? ? ? ? 46.0 [1]
border-box e content-box ? ? ? ? ? ? ?
fill Não suportado 46.0         46.0

[1] WebKit implementou uma variação deste valor sob o nome fill-available em Dezembro de 2013.

[2] Versões anteriores do WebKit implementaram uma versão anterior deste valore sob o nome intrinsic, mas implementam fit-content desde a versão 6.1 também.

[3] Não fixado.

[4] O antigo WebKit suporta as palavras-chave intrinsic e min-intrinsic, mas foi removido no Chrome 48.

Veja também