Carregando...

Margin CSS

Você pinta uma caixa, desenha a borda e arredonda cantos. Próxima habilidade: afastar as caixas. margin é o vão exterior em volta do elemento — o ar fora da borda.

O que é margin?

Margin é espaço vazio ao redor do lado de fora da borda do elemento. Separa uma caixa das vizinhas. Não pinta o fundo do elemento nesse vão — o vão fica fora da área preenchida.

Margin vs padding (contraste rápido)

Padding (próxima lição) fica dentro da borda — entre conteúdo e borda. Margin fica fora da borda — entre esta caixa e a seguinte. Se lembrar uma linha hoje: margin = exterior, padding = interior.

Atalho: quantos valores?

Você pode passar um, dois, três ou quatro comprimentos. A ordem dos lados é fixa.

📊 Contagem de valores do atalho margin

Valores Significado Nota diária
1 Os quatro lados iguais Ar uniforme em volta de um card
2 Topo+base, depois esquerda+direita Pares vertical e horizontal
3 Topo, esquerda+direita, base Menos comum — saiba que existe
4 Topo, direita, base, esquerda Controle total, horário a partir do topo

Mesmo espaço em cada lado

Comece com um comprimento para todos os lados.

Mesmo margin em todos os lados

css
CSS Code 
.card {
margin: 16px;
border: 1px solid #cbd5e1;
padding: 1rem;
background-color: #ffffff;
}

Dois valores — vertical, depois horizontal

Dois comprimentos emparelham lados opostos: primeiro topo e base; depois esquerda e direita.

Margin vertical depois horizontal

css
CSS Code 
.panel {
margin: 24px 12px;
border: 1px solid #94a3b8;
padding: 1rem;
background-color: #f8fafc;
}

Quatro valores — horário a partir do topo

Quando cada lado precisa do próprio vão: topo → direita → base → esquerda.

Atalho margin de quatro lados

css
CSS Code 
.note {
margin: 8px 20px 32px 20px;
border: 1px solid #0f766e;
padding: 0.75rem;
background-color: #ecfdf5;
}

Centralizar um bloco com auto

Para uma caixa em bloco com largura definida, margin-left: auto e margin-right: auto (muitas vezes margin: 0 auto) repartem o espaço sobrante nos dois lados — jeito clássico de centralizar na horizontal.

Centralização horizontal com auto

css
CSS Code 
.box {
width: 280px;
margin: 0 auto;
border: 2px solid #0f766e;
padding: 1rem;
background-color: #f0fdfa;
}

Margens verticais podem colapsar

Quando dois elementos em bloco empilham, a margem inferior do primeiro e a superior do segundo muitas vezes colapsam num único vão — em geral o maior dos dois, não a soma. Surpreende iniciantes; espere isso entre parágrafos e seções empilhados.

Blocos empilhados com colapso de margin

css
CSS Code 
.block-a {
margin-bottom: 24px;
background-color: #ccfbf1;
padding: 0.5rem;
}

.block-b {
margin-top: 24px;
background-color: #99f6e4;
padding: 0.5rem;
}
/* Entre eles você costuma ver cerca de 24px, não 48px */

Um lado de cada vez

Formas longas como margin-top são perfeitas quando só precisa de espaço acima de um título ou abaixo de um botão.

Só margin superior

css
CSS Code 
.section-title {
margin-top: 2rem;
margin-bottom: 0.5rem;
margin-left: 0;
margin-right: 0;
}

Experimente você

  1. Dê a dois cards margin: 16px e observe o vão exterior.
  2. Reescreva um como margin: 24px 12px e note vertical vs horizontal.
  3. Centralize uma caixa de 280px com margin: 0 auto.
  4. Empilhe dois blocos coloridos com margin-bottom e margin-top ambos 24px — o vão parece 24 ou 48?
  5. Espace um título só com margin-top.

Erros comuns

  • Usar margin quando queria padding (almofada interna para o texto)
  • Esperar que margin: auto centre cada item flex/grid como um bloco simples (o contexto de layout importa)
  • Somar margens superior e inferior assumindo que sempre se adicionam (o colapso pode encolher o vão)
  • Margens enormes em todo lugar em vez de uma escala pequena e consistente
  • Misturar a ordem dos quatro valores (topo, direita, base, esquerda)

Resumo

  • Margin é espaço exterior fora da borda
  • Atalho: 1, 2 ou 4 valores (quatro no horário a partir do topo)
  • margin: 0 auto centra horizontalmente um bloco com largura
  • Margens verticais entre blocos empilhados podem colapsar
  • Use formas longas quando só um lado precisa de espaço
  • Padding é o primo interior — próxima lição

🧠 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