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 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
Midia	visual
Computed value	a percentage or `auto` or the absolute length
Animation type	a length, percentage or calc();
Canonical order	the 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.	Working Draft	Adicionadas as palavras-chave `max-content`, `min-content`, `available`, `fit-content`, `border-box`, `content-box`
CSS Transitions The definition of 'width' in that specification.	Working Draft	Lista a largura como animável.
CSS Level 2 (Revision 1) The definition of 'width' in that specification.	Recommendation	Determina em qual elemento vai ser aplicado.
CSS Level 1 The definition of 'width' in that specification.	Recommendation	Definição inicial
CSS Intrinsic & Extrinsic Sizing Module Level 3 The definition of 'width' in that specification.	Working Draft	Adiciona novas palavras-chave para largura e altura.

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

box model, height, box-sizing, min-width, max-width