Propriedade Width
Última atualização: 2026-09-13
width Propriedade Width
A propriedade width define a largura da área de conteúdo de um elemento e é uma das propriedades de dimensionamento mais usadas no modelo de caixa do CSS. Ela afeta apenas elementos não substituídos (non-replaced elements), e seu valor padrão, auto, faz o navegador calcular a largura automaticamente com base no bloco que a contém. Em layouts reais, o width é frequentemente combinado com max-width e min-width para criar designs responsivos.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | non-replaced |
| Tipo de Animação | length |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
width: auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>);⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | Palavra-chave | O navegador calcula a largura automaticamente. |
<length> | Tipo | Um valor de comprimento fixo, como 16px ou 2em. |
<percentage> | Tipo | Uma porcentagem relativa à largura do bloco que a contém. |
max-content | min-content | fit-content | Palavra-chave | Palavras-chave que calculam a largura a partir do conteúdo. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| width | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： Com o padrão width:auto, os elementos de nível de bloco preenchem toda a largura do contêiner pai, enquanto os elementos de nível inline encolhem para se ajustar ao conteúdo.
Aviso： O width não inclui padding nem border, a menos que você defina box-sizing:border-box.
❓ Perguntas Frequentes
QQual é a diferença entre width:100% e width:auto?
AO width:100% faz a área de conteúdo ser exatamente igual à largura do contêiner pai, então adicionar padding ou border empurra a largura total do elemento além do pai. Já o width:auto subtrai automaticamente o padding e a border, fazendo o elemento preencher o pai exatamente. Resumindo: 100% fixa a área de conteúdo, enquanto auto adapta a largura total, e a diferença é mais visível em caixas que têm padding.
QComo faço a largura de um elemento se adaptar ao conteúdo?
AUse palavras-chave baseadas no conteúdo. width:max-content define a largura para o máximo que o conteúdo pode ter sem quebrar linha; width:min-content usa a largura da palavra mais longa ou da menor unidade; width:fit-content fica entre as duas, dimensionado conforme o conteúdo quando há espaço e encolhendo quando não há. Observe que essas palavras-chave exigem suporte do navegador; alguns navegadores móveis mais antigos precisam de prefixos ou fallbacks.
QA porcentagem do width é relativa a quê?
AA porcentagem é calculada em relação à largura da área de conteúdo do bloco que a contém. Para elementos em fluxo normal, o bloco que a contém é a área de conteúdo do pai; para elementos posicionados absolutamente, é a padding box do ancestral posicionado mais próximo; para elementos fixos, é a viewport. Assim, o width:100% de um filho refere-se à área de conteúdo do pai, não ao seu tamanho externo total.
QComo torno as imagens responsivas sem transbordar o contêiner?
AO padrão recomendado é img { max-width:100%; height:auto; }. O max-width:100% faz a imagem reduzir proporcionalmente conforme o contêiner afunila, então ela nunca transborda, enquanto o height:auto recalcula a altura a partir da proporção original para evitar distorção. Isso é mais seguro do que usar apenas width:100%, que estica à força imagens pequenas e as deixa borradas. Aplique o padrão a todo elemento de mídia para que imagens e vídeos escalem com segurança em qualquer layout.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Tutorial do Modelo de Caixa CSS
Entenda como o width se relaciona com padding e border.
Propriedade max-width
Limite a largura máxima do elemento para layouts responsivos.
