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 (en-US)	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

Veja também

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