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 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
Computed valuea percentage or auto or the absolute length
Animation typea length, percentage or calc();

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

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

content-box

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

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

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

<length-percentage> = 
  <length> (en-US)      |
  <percentage> (en-US)

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 Box Model
The definition of 'width' in that specification.		 Candidata a Recomendação 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 Box Sizing Module Level 3
The definition of 'width' in that specification.		 Rascunho atual Adiciona novas palavras-chave para largura e altura.

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também