</>Codding
Tailwind CSS0/10 lições

Módulo 1 • Fundamentos

Espaçamento e tipografia

Ferramentas e leitura
Leitura100%
Aula guiada50–75 min5 etapas práticas

Nesta aula, você vai compreender Espaçamento e tipografia com explicação progressiva, exemplo resolvido, checagens e prática. Nada de apenas copiar: cada etapa prepara a próxima.

Antes de começar: Leia a aula anterior do módulo se algum termo parecer novo. Você pode testar o exemplo antes de continuar.

Ao terminar, você vai conseguir

  • Explicar Espaçamento e tipografia com suas próprias palavras
  • Reconhecer as partes importantes em um exemplo real
  • Identificar e corrigir os erros mais frequentes
  • Aplicar o conteúdo em uma atividade prática
1

Estrutura

Defina o conteúdo e sua hierarquia.

2

Apresentação

Aplique regras visuais sem perder significado.

3

Verificação

Confira em tamanhos de tela e formas de navegação diferentes.

0/6 atividades
1

Entenda o problema

O que é Espaçamento e tipografia

Todo elemento é uma caixa: conteúdo, padding, borda e margem. Entender o box model resolve 80% dos 'por que isso não encaixa'.

Cheque seu entendimento

Quando Grid é melhor que Flexbox?

1 de 5

O que você aprendeu

  • Todo elemento é uma caixa: conteúdo, padding, borda e margem. Entender o box model resolve 80% dos 'por que isso não encaixa'.
  • Uma coluna no celular, três a partir de 640px. Flex cuida da barra (uma direção), grid cuida dos cards (duas).
  • Evite: Esquecer box-sizing e brigar com larguras que estouram.
  • Evite: Usar posicionamento absoluto para montar layout inteiro.

Videoaulas sobre este tema

Se você aprende melhor assistindo, abrimos uma seleção de aulas em vídeo em português sobre exatamente este assunto.

Aula em vídeo sobre este temaVídeos em português explicando "Espaçamento e tipografia" passo a passo.Vendo alguém programar issoExemplos práticos, com o código sendo escrito na tela.Playlist completa de Tailwind CSSCurso em vídeo do começo ao fim, para acompanhar junto com o módulo "Fundamentos".

Quiz rápido

0/2 • 0 certas

1. Quando Grid é melhor que Flexbox?

2. O que box-sizing: border-box faz?

Laboratório

1/4

1. Monte a primeira versão

Prática guiada: edite o exemplo abaixo aplicando "Espaçamento e tipografia" e clique em Rodar para ver o resultado ao vivo.

Abrir no playground
  • Checkpoints da prática (1/4)
  • Escreva sua versão a partir do modeloO texto do editor ainda é igual ao modelo inicial. Altere pelo menos uma linha para que a prática conte como sua.
  • Nenhuma lacuna deixada em branco
  • Execute seu códigoClique em “Verificar resposta” para rodar seu código e comparar a saída com o esperado.
  • Resultado ainda não confereEsperado: o programa rodar sem erro. Se aparecer uma mensagem de erro, leia a última linha: ela indica a linha e o tipo do problema.

Tire sua dúvida

Cada resposta é conferida contra o material desta lição antes de aparecer. Sem IA por trás e sem inventar nada.

Espaçamento e tipografia

Tailwind CSS • Módulo 1: Fundamentos • Codding — material para estudo offline

Aluno: ______________________________ Data: ____ / ____ / ______

Nesta aula, você vai compreender Espaçamento e tipografia com explicação progressiva, exemplo resolvido, checagens e prática. Nada de apenas copiar: cada etapa prepara a próxima.

Objetivos da aula

  • Explicar Espaçamento e tipografia com suas próprias palavras
  • Reconhecer as partes importantes em um exemplo real
  • Identificar e corrigir os erros mais frequentes
  • Aplicar o conteúdo em uma atividade prática

Pré-requisito: Leia a aula anterior do módulo se algum termo parecer novo. Você pode testar o exemplo antes de continuar. • Duração: 50–75 min

Explicação passo a passo

1. O que é Espaçamento e tipografia

Todo elemento é uma caixa: conteúdo, padding, borda e margem. Entender o box model resolve 80% dos 'por que isso não encaixa'.

Checkpoint: Quando Grid é melhor que Flexbox? — Resposta: Quando você precisa alinhar em duas dimensões (linhas e colunas)

2. Como pensar antes de fazer

box-sizing: border-box faz largura incluir padding e borda — é o padrão que todo projeto moderno liga logo no começo. Sem ele, width: 100% mais padding estoura o container.

Dica: Não decore a forma. Tente explicar com suas palavras qual problema “Espaçamento e tipografia” resolve.

3. Exemplo completo, do início ao resultado

Flexbox organiza em UMA direção (linha ou coluna): use para barras de navegação, cards lado a lado, centralização. Grid organiza em DUAS direções: use para layouts de página com linhas e colunas definidas.

<!doctype html>
<html lang="pt-BR"><head><meta charset="utf-8" /><style>
  * { box-sizing: border-box; }
  body { font-family: system-ui; margin: 0; padding: 1.5rem; background: #0b1020; color: #eee; }
  .cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }
  .card { background: #161c33; padding: 1rem; border-radius: 12px; }
  .barra { display: flex; align-items: center; justify-content: space-between; }
  @media (min-width: 640px) { .cards { grid-template-columns: repeat(3, 1fr); } }
</style></head>
<body>
  <div class="barra"><strong>Loja</strong><span>Carrinho</span></div>
  <div class="cards">
    <div class="card">Um</div><div class="card">Dois</div><div class="card">Três</div>
  </div>
</body></html>
TrechoO que faz
<!doctype html>Define uma parte da estrutura visível ou semântica da página.
<html lang="pt-BR"><head><meta charset="utf-8" /><style>Define uma parte da estrutura visível ou semântica da página.
* { box-sizing: border-box; }Contribui para a transformação principal mostrada neste exemplo.
body { font-family: system-ui; margin: 0; padding: 1.5rem; background: #0b1020; color: #eee; }Contribui para a transformação principal mostrada neste exemplo.
.cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }Contribui para a transformação principal mostrada neste exemplo.
.card { background: #161c33; padding: 1rem; border-radius: 12px; }Contribui para a transformação principal mostrada neste exemplo.
.barra { display: flex; align-items: center; justify-content: space-between; }Contribui para a transformação principal mostrada neste exemplo.
@media (min-width: 640px) { .cards { grid-template-columns: repeat(3, 1fr); } }Contribui para a transformação principal mostrada neste exemplo.

Dica: Uma coluna no celular, três a partir de 640px. Flex cuida da barra (uma direção), grid cuida dos cards (duas).

Checkpoint: O que box-sizing: border-box faz? — Resposta: Faz padding e borda entrarem na largura declarada

4. Do detalhe para o todo

Responsividade começa pelo mobile: escreva o estilo base para tela pequena e use @media (min-width: ...) para adicionar o que a tela grande permite. Unidades relativas (rem, %, fr, clamp) evitam quebra em zoom.

5. Erros comuns e como corrigi-los

1. Esquecer box-sizing e brigar com larguras que estouram. 2. Usar posicionamento absoluto para montar layout inteiro. 3. Fixar tudo em pixels e quebrar em telas pequenas.

Dica: Quando algo der errado, compare uma diferença por vez com o exemplo. Evite mudar várias partes ao mesmo tempo.

Prática guiada

1. 1. Monte a primeira versão

Prática guiada: edite o exemplo abaixo aplicando "Espaçamento e tipografia" e clique em Rodar para ver o resultado ao vivo.

<!doctype html>
<html lang="pt-BR"><head><meta charset="utf-8" /><style>
  * { box-sizing: border-box; }
  body { font-family: system-ui; margin: 0; padding: 1.5rem; background: #0b1020; color: #eee; }
  .cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }
  .card { background: #161c33; padding: 1rem; border-radius: 12px; }
  .barra { display: flex; align-items: center; justify-content: space-between; }
  @media (min-width: 640px) { .cards { grid-template-columns: repeat(3, 1fr); } }
</style></head>
<body>
  <div class="barra"><strong>Loja</strong><span>Carrinho</span></div>
  <div class="cards">
    <div class="card">Um</div><div class="card">Dois</div><div class="card">Três</div>
  </div>
</body></html>

Dica: Volte ao exemplo resolvido e compare a estrutura. Esquecer box-sizing e brigar com larguras que estouram.

2. 2. Preveja antes de testar

Sem executar, explique qual resultado o exemplo de Espaçamento e tipografia deve produzir e qual parte é responsável por ele.

Minha previsão:

A parte responsável pelo resultado:

Como vou conferir:

Dica: Use o modelo mental da aula: entrada, transformação e evidência observável.

3. 3. Encontre e corrija o erro

Use o exemplo de Espaçamento e tipografia, identifique um risco citado na aula e registre ou implemente a correção.

<!doctype html>
<html lang="pt-BR"><head><meta charset="utf-8" /><style>
  * { box-sizing: border-box; }
  body { font-family: system-ui; margin: 0; padding: 1.5rem; background: #0b1020; color: #eee; }
  .cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }
  .card { background: #161c33; padding: 1rem; border-radius: 12px; }
  .barra { display: flex; align-items: center; justify-content: space-between; }
  @media (min-width: 640px) { .cards { grid-template-columns: repeat(3, 1fr); } }
</style></head>
<body>
  <div class="barra"><strong>Loja</strong><span>Carrinho</span></div>
  <div class="cards">
    <div class="card">Um</div><div class="card">Dois</div><div class="card">Três</div>
  </div>
</body></html>

Dica: Esquecer box-sizing e brigar com larguras que estouram.

4. 4. Aplique em um caso novo

Crie uma variação própria usando Espaçamento e tipografia. Mude os dados ou o cenário e demonstre que o resultado continua correto.

<!doctype html>
<html lang="pt-BR"><head><meta charset="utf-8" /><style>
  * { box-sizing: border-box; }
  body { font-family: system-ui; margin: 0; padding: 1.5rem; background: #0b1020; color: #eee; }
  .cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }
  .card { background: #161c33; padding: 1rem; border-radius: 12px; }
  .barra { display: flex; align-items: center; justify-content: space-between; }
  @media (min-width: 640px) { .cards { grid-template-columns: repeat(3, 1fr); } }
</style></head>
<body>
  <div class="barra"><strong>Loja</strong><span>Carrinho</span></div>
  <div class="cards">
    <div class="card">Um</div><div class="card">Dois</div><div class="card">Três</div>
  </div>
</body></html>

Dica: Mantenha a estrutura que já funcionou e altere uma decisão por vez.

Revisão

  • Todo elemento é uma caixa: conteúdo, padding, borda e margem. Entender o box model resolve 80% dos 'por que isso não encaixa'.
  • Uma coluna no celular, três a partir de 640px. Flex cuida da barra (uma direção), grid cuida dos cards (duas).
  • Evite: Esquecer box-sizing e brigar com larguras que estouram.
  • Evite: Usar posicionamento absoluto para montar layout inteiro.

Exemplo comentado

<!doctype html>
<html lang="pt-BR"><head><meta charset="utf-8" /><style>
  * { box-sizing: border-box; }
  body { font-family: system-ui; margin: 0; padding: 1.5rem; background: #0b1020; color: #eee; }
  .cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }
  .card { background: #161c33; padding: 1rem; border-radius: 12px; }
  .barra { display: flex; align-items: center; justify-content: space-between; }
  @media (min-width: 640px) { .cards { grid-template-columns: repeat(3, 1fr); } }
</style></head>
<body>
  <div class="barra"><strong>Loja</strong><span>Carrinho</span></div>
  <div class="cards">
    <div class="card">Um</div><div class="card">Dois</div><div class="card">Três</div>
  </div>
</body></html>

Uma coluna no celular, três a partir de 640px. Flex cuida da barra (uma direção), grid cuida dos cards (duas).

Erros comuns

  • Esquecer box-sizing e brigar com larguras que estouram.
  • Usar posicionamento absoluto para montar layout inteiro.
  • Fixar tudo em pixels e quebrar em telas pequenas.

Quiz e gabarito completo

  1. 1. Quando Grid é melhor que Flexbox?

    • a) Sempre
    • b) Quando você precisa alinhar em duas dimensões (linhas e colunas)
    • c) Só para textos
    • d) Quando o layout é de uma direção só

    Gabarito: b) Quando você precisa alinhar em duas dimensões (linhas e colunas) — Flex é unidimensional; grid é bidimensional.

  2. 2. O que box-sizing: border-box faz?

    • a) Adiciona borda a tudo
    • b) Faz padding e borda entrarem na largura declarada
    • c) Remove a margem
    • d) Centraliza o elemento

    Gabarito: b) Faz padding e borda entrarem na largura declarada — Sem ele, width: 100% + padding ultrapassa o container.

Codding • Tailwind CSS • Espaçamento e tipografia • Prova final e certificado em codding.lovable.app/cursos/tailwind-css/prova