Carregando...

Altura e largura CSS

Você emoldura uma caixa, arredonda e dá espaço exterior e interior. Próxima habilidade: decidir o tamanho da caixa. width e height definem o tamanho da caixa de conteúdo — quão larga e quão alta deve ser essa área central.

O que fazem width e height?

width controla o tamanho horizontal. height controla o vertical. Valores comuns usam comprimentos como px ou tamanhos relativos como %. Se não os tocar, muitos elementos dimensionam-se pelo conteúdo e pelo contexto de layout.

Tamanho fixo em píxeis

Um começo quotidiano claro: dê a um painel uma largura exata (e opcionalmente altura) em píxeis.

Largura fixa em píxeis

css
CSS Code 
.panel {
width: 320px;
border: 1px solid #cbd5e1;
padding: 1rem;
background-color: #ffffff;
}

Largura e altura juntas

Quando o design precisa de um retângulo definido — moldura de miniatura, ladrilho, espaço de média — defina ambos.

Largura e altura num ladrilho

css
CSS Code 
.tile {
width: 160px;
height: 120px;
border: 2px solid #0f766e;
background-color: #ecfdf5;
}

Largura percentual

Uma largura % costuma ser relativa à largura do bloco contentor (muitas vezes o pai). width: 50% significa «cerca de metade da largura do meu pai», não magicamente metade do ecrã.

Metade da largura do pai

css
CSS Code 
.half {
width: 50%;
border: 1px solid #94a3b8;
padding: 0.75rem;
background-color: #f8fafc;
}

Ferramentas de tamanho num relance

Além de width e height simples, o CSS dá guarda-corpos.

📊 Ferramentas de largura e altura

Ferramenta Papel Nota diária
width / height Tamanho preferido da caixa de conteúdo Comece aqui para tamanhos fixos ou fluidos
min-width / min-height Não encolher abaixo disto Manter botões ou barras laterais usáveis
max-width / max-height Não crescer além disto Suavizar imagens enormes ou texto largo
auto Deixar o navegador calcular Altura padrão costuma seguir o conteúdo
% Relativo ao bloco contentor % de largura é comum; % de altura precisa de altura de pai definida

min-width como piso

Útil quando a caixa deve continuar usável mesmo com layout apertado.

Piso de largura mínima

css
CSS Code 
.btn-wide {
min-width: 12rem;
padding: 0.6rem 1rem;
background-color: #0f766e;
color: #ffffff;
border: none;
}

max-width como teto

Hábito clássico para texto legível ou imagens que não se estiquem sem fim em ecrãs grandes.

Teto de largura máxima

css
CSS Code 
.prose {
max-width: 40rem;
width: 100%;
margin: 0 auto;
line-height: 1.6;
}

A altura costuma ficar auto

Para blocos de texto, deixe a altura crescer com o conteúdo. Uma altura fixa muito pequena pode cortar texto se não planear overflow (lição posterior).

Altura auto segue o conteúdo

css
CSS Code 
.article {
width: 100%;
max-width: 36rem;
height: auto; /* cresce com os parágrafos */
padding: 1rem;
border: 1px solid #cbd5e1;
}

Experimente você

  1. Painel com width: 320px e padding/borda visíveis.
  2. Ladrilho 160×120 com largura e altura.
  3. Filho com width: 50% dentro de um pai mais largo; redimensione o pai.
  4. Acrescente min-width: 12rem a um botão e encolha o viewport.
  5. Bloco de texto com max-width: 40rem e height: auto — depois tente altura fixa muito pequena e note o risco de corte.

Erros comuns

  • Usar height: 50% sem altura explícita do pai (a percentagem pode não fazer o que espera)
  • Fixar um height curto numa caixa de texto e estranhar conteúdo cortado
  • Esquecer max-width em imagens grandes ou linhas longas
  • Misturar width (tamanho da caixa de conteúdo) com padding (almofada interna)
  • Assumir que width inclui sempre borda e padding — depende de box-sizing (em breve)

Resumo

  • width e height dimensionam a caixa de conteúdo
  • Use px para tamanhos fixos e % para larguras fluidas relativas ao pai
  • min-* e max-* definem piso e teto
  • Prefira height: auto para texto que cresce
  • Altura percentual precisa de um pai com altura definida
  • A conta completa da caixa chega nas próximas lições de box model

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
9
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 1 de 1
Css Tutorial