Propriedade Max-Width
Última atualização: 2026-09-13
max-width Propriedade Max-Width
A propriedade max-width define a largura máxima de um elemento, evitando que ele fique muito largo em telas grandes e prejudique a legibilidade. Seu valor padrão, none, significa que não há limite superior. É uma ferramenta central do design responsivo, frequentemente combinada com width:100% para que elementos de mídia se adaptem sem exceder seu tamanho intrínseco.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | non-replaced |
| Tipo de Animação | length |
| Versão CSS | CSS2 |
| Status | Padrão |
📝 Sintaxe
max-width: none | <length> | <percentage> | min-content | max-content | fit-content;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | Palavra-chave | Sem largura máxima. |
<length> | Tipo | Uma largura máxima fixa. |
<percentage> | Tipo | Uma porcentagem relativa ao bloco que a contém. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| max-width | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： O max-width tem precedência sobre o width; mesmo que width seja definido maior, a largura real não excederá o max-width.
❓ Perguntas Frequentes
QO que faz o max-width:100%?
AO max-width:100% impede que um elemento fique mais largo que seu pai, e combinado com height:auto escala imagens proporcionalmente sem transbordar, que é o modo padrão de tornar a mídia responsiva. Diferente do width:100%, que força o elemento a preencher o contêiner e estica imagens pequenas, o max-width:100% só reduz a imagem quando o contêiner é mais estreito que o tamanho intrínseco da imagem; imagens maiores são exibidas em tamanho real.
QComo centralizo o conteúdo limitando sua largura máxima?
ADefina um max-width para limitar a largura e use margin:0 auto para centralizar o elemento horizontalmente, que é a abordagem mais comum. Por exemplo, um corpo de artigo com max-width:800px; margin:0 auto; encolhe automaticamente em telas estreitas e permanece centralizado em 800px em telas largas. Para o margin:auto funcionar, o elemento deve ser de nível de bloco e mais estreito que o espaço disponível. Isso mantém linhas de leitura com um comprimento confortável em telas de desktop enquanto permanece totalmente fluido em telas menores.
QSe max-width e width forem definidos, qual vence?
AO max-width vence. Quando width excede max-width, o elemento é renderizado em max-width; quando width é menor, aplica-se width. A prioridade geral é min-width, depois max-width, depois width, então o max-width limita o width por cima e nunca pode ficar abaixo de min-width. Esse bloqueio é o que impede que valores de width excessivamente grandes quebrem um layout, e é por isso que o conteúdo permanece dentro de uma medida de leitura confortável.
QO max-width pode usar porcentagem?
ASim. O max-width aceita comprimentos, porcentagens e palavras-chave de conteúdo. Uma porcentagem é calculada em relação à largura do bloco que a contém, então, por exemplo, max-width:80% significa não mais largo que 80% do contêiner pai. Também suporta palavras-chave como min-content, max-content e fit-content, que derivam o limite superior do próprio conteúdo e dão comportamento responsivo sem media queries. Porcentagens são particularmente úteis para limitar painéis dentro de pais fluidos.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
