Largura e altura
Além de width e height fixos, existem versões flexíveis, que respeitam limites mínimo e máximo sem travar o layout.
Estudar esta lição interativa →width e height fixos (em px, por exemplo) são previsíveis, mas rígidos: não encolhem nem crescem conforme o conteúdo ou a tela mudam. Para a maioria dos layouts modernos, é mais útil combinar valores flexíveis com limites: min-width (nunca menor que isso) e max-width (nunca maior que isso).
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. width fixa não se adapta; min/max-width com % dá flexibilidade dentro de um intervalo seguro; width auto acompanha o conteúdo.
Um exemplo de produto real, muito comum: o contêiner de texto central de um artigo de blog costuma usar algo como max-width: 700px com width: 100%. Isso significa "ocupe toda a largura disponível, mas nunca passe de 700px", o que evita linhas de texto absurdamente longas (difíceis de ler) em monitores muito largos, sem travar o layout em telas estreitas.
Usar width fixa em pixels para elementos que precisam caber em telas de tamanhos variados (banners, cartões, imagens) é a causa mais comum de conteúdo "vazando" para fora da tela no celular. Prefira max-width combinado com width: 100% sempre que o elemento precisar se adaptar.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Ajuste width/max-width/min-width do banner.