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
/* 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
auto | (en-US) <length> (en-US) | (en-US) <percentage> (en-US) | (en-US) min-content | (en-US) max-content | (en-US) fit-content | (en-US) fit-content(<length-percentage>)where
<length-percentage> = <length> (en-US) | (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 Basic 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 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! (en-US)
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 (en-US) 46.0 [1] |
3.0 (1.9)-moz (en-US) | ? | 15 -webkit (en-US) | 2.0 (421) (intrinsic value)6.1 -webkit (en-US) |
min-content |
22.0 [4] -webkit (en-US) |
3.0 (1.9) -moz (en-US) | ? | 15 -webkit (en-US) | 2.0 (421) (min-intrinsic value)6.1 -webkit (en-US) |
available |
Não suportado | 3.0 (1.9) -moz (en-US) | ? | ? | ?[1] |
fill-available |
22.0 -webkit (en-US) | Não suportado | ? | ? | 6.1 -webkit (en-US) |
fit-content |
22.0 [4] -webkit (en-US) 46.0 [1] |
3.0 (1.9) -moz (en-US) | ? | 15 -webkit (en-US) | 6.1 -webkit (en-US)[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.