EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Margens e Preenchimento CSS

O espaçamento CSS vem em dois tipos: preenchimento e margem. Eles são propriedades-chave para controlar "espaço em branco interno" e "espaçamento externo" de elementos.

Referência Rápida de Propriedades de Espaçamento

Propriedade Valores Comuns Finalidade
padding 16px, 10px 20px, 10px 5px 15px 20px Preenchimento (topo, direita, baixo, esquerda)
padding-top/right/bottom/left 16px, 5% Preenchimento de lado único
margin 20px, 0 auto, 10px 0 20px 0 Margem (topo, direita, baixo, esquerda)
margin-top/right/bottom/left 10px, auto Margem de lado único
auto margin: 0 auto Centralizar elementos de bloco horizontalmente
💡 Regra abreviada de margem: 4 valores (topo, direita, baixo, esquerda) → 3 valores (topo, esquerda+direita, baixo) → 2 valores (topo+baixo, esquerda+direita) → 1 valor (todos os lados iguais).

Preenchimento

padding é o espaço entre a área de conteúdo e a borda — o "espaço em branco interno" do elemento.

Exemplo

HTML 
<style>
.box {
  padding: 20px;  /* 20px em todos os lados */
  background: #fff3e0;
  border: 1px solid #ffb74d;
}
</style>
<div class="box">20px de preenchimento cria espaço entre conteúdo e borda</div>
▶ Experimente

Definindo Lados Individuais

Exemplo

HTML 
<style>
.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
  background: #fce4ec;
  border: 1px solid #e91e63;
}
</style>
<div class="box">Preenchimento diferente: topo 10px, direita 20px, baixo 30px, esquerda 40px</div>
▶ Experimente

Regras Abreviadas de Preenchimento

💡 Truque de memória: A abreviação de preenchimento/margem começa do "topo" no sentido horário — topo, direita, baixo, esquerda. Não lembra? Pense "sentido horário a partir das 12 horas." Dois valores significam "topo+baixo, esquerda+direita."

CSS 
/* Um valor: todos os lados iguais */
padding: 20px;

/* Dois valores: topo+baixo, esquerda+direita */
padding: 10px 20px;

/* Três valores: topo, esquerda+direita, baixo */
padding: 10px 20px 30px;

/* Quatro valores: topo, direita, baixo, esquerda (sentido horário) */
padding: 10px 20px 30px 40px;

Casos de Uso Comuns de Preenchimento

Exemplo

HTML 
<style>
/* Adicionar preenchimento ao botão para melhor clicabilidade */
.button {
  padding: 12px 24px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
}

/* Espaço em branco do conteúdo do card */
.card {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
}

/* Área de toque do item de navegação */
.nav-item {
  padding: 10px 16px;
  background: #e8eaf6;
  display: inline-block;
}
</style>
<button class="button">Botão</button>
<div class="card">Conteúdo do card com espaçamento confortável da borda</div>
<nav class="nav-item">Item de Navegação</nav>
▶ Experimente

Notas sobre Preenchimento

📌 Nota sobre elementos inline: O preenchimento de <span>, <a> e outros elementos inline só funciona horizontalmente. Se você quer áreas de clique perfeitas em elementos inline, defina display: inline-block.

Margem

margin é o espaço entre a borda do elemento e outros elementos — o "espaçamento externo" do elemento.

Exemplo

HTML 
<style>
.box {
  margin: 20px;  /* 20px em todos os lados */
  background: #e8f5e9;
  border: 1px solid #66bb6a;
  padding: 10px;
}
</style>
<div class="box">20px de margem mantém 20px de espaçamento de outros elementos</div>
▶ Experimente

Regras Abreviadas de Margem

Igual ao preenchimento:

CSS 
margin: 20px;            /* Todos os lados iguais */
margin: 10px 20px;       /* Topo+baixo, esquerda+direita */
margin: 10px 20px 30px;  /* Topo, esquerda+direita, baixo */
margin: 10px 20px 30px 40px; /* Topo, direita, baixo, esquerda */

Casos de Uso Comuns de Margem

Exemplo

HTML 
<style>
/* Centralizar um contêiner */
.container {
  width: 1200px;
  margin: 0 auto;   /* Centralização horizontal */
  background: #e3f2fd;
  padding: 10px;
}

/* Espaçamento entre elementos */
.box {
  margin-bottom: 20px;
}

/* Espaço abaixo dos títulos */
h1 {
  margin-bottom: 16px;
}
</style>
<div class="container">Elemento contêiner com elementos filhos dentro</div>
<div class="box">Elemento caixa demonstrando estilização do modelo de caixa</div>
<h1>Título de Primeiro Nível</h1>
▶ Experimente

Usando margin: auto para Centralização

margin: 0 auto pode centralizar horizontalmente um elemento de bloco dentro de seu pai:

Exemplo

HTML 
<style>
.box {
  width: 400px;      /* Deve especificar largura */
  margin: 0 auto;    /* Centralização horizontal */
}
</style>
<div class="box">Elemento caixa demonstrando estilização do modelo de caixa</div>
▶ Experimente

Colapso de Margem

⚠️ Armadilha clássica: Margens verticais adjacentes colapsam na maior — isso é chamado "Colapso de Margem." A correção mais simples é adicionar overflow: hidden ou padding: 1px ao elemento pai. Usar um contêiner flex também previne isso.

Este é um conceito CSS importante — margens verticais adjacentes colapsam em uma, pegando o valor maior.

Cenário 1: Irmãos Adjacentes

Exemplo

HTML 
<style>
.box1 {
  margin-bottom: 30px;
}
.box2 {
  margin-top: 20px;
}
/* O espaçamento real é 30px (valor maior), não 50px */
</style>
<div class="box1">Caixa1</div>
<div class="box2">Caixa2</div>
▶ Experimente

Cenário 2: Elementos Pai-Filho

Quando o pai não tem preenchimento, borda ou conteúdo, a margem do filho "penetra" para fora do pai:

Exemplo

HTML 
<style>
.parent {
  background: #eee;
  /* Sem preenchimento ou borda */
}
.child {
  margin-top: 20px;  /* Esta margem faz o pai "cair" também */
}
</style>
<div class="parent">Contêiner pai</div>
<div class="child">Conteúdo filho</div>
▶ Experimente

Métodos de evasão:

Cenário 3: Elementos Vazios

Um elemento de bloco sem conteúdo, preenchimento ou borda também terá suas margens superior e inferior colapsadas.

Casos Onde Margens Não Colapsam

Escolhendo Entre Preenchimento e Margem

Cenário Usar Qual
Manter texto do botão de tocar nas bordas preenchimento
Manter dois cards separados margem
Manter conteúdo da borda preenchimento
Centralizar contêiner na página margem: auto
Controlar tamanho da área de fundo preenchimento

Método de decisão simples: A cor de fundo deve cobrir esta área? Se sim, use preenchimento; se não, use margem.

❓ Perguntas Frequentes

Q O que é colapso de margem?
R Margens verticais adjacentes colapsam na maior. Por exemplo, um elemento tem `margin-bottom: 30px`, o próximo tem `margin-top: 20px` — o espaçamento real é 30px, não 50px. Adicionar `overflow: hidden` ao pai ou usar layout flex previne isso.
Q E se o preenchimento tornar os elementos grandes demais?
R Defina globalmente `box-sizing: border-box`. Isso inclui preenchimento e borda na largura/altura total do elemento, prevenindo expansão. Quase todos os projetos modernos fazem isso.
Q Quais condições a centralização com margin: 0 auto precisa?
R O elemento deve ter largura explícita (não auto) e deve ser um elemento de bloco (display: block). Elementos inline e elementos de bloco sem largura definida não podem ser centralizados com margin: auto.

📖 Resumo

📝 Exercícios

  1. Crie uma página de "grupo de cards" com 3 cards, usando margem para controlar espaçamento entre cards.
  2. Crie uma barra de navegação usando preenchimento para controlar a distância texto-borda em cada item de navegação.
  3. Demonstre "colapso de margem" e resolva com pelo menos dois métodos diferentes.
  4. Use margin: 0 auto para centralizar horizontalmente um contêiner de 800px de largura na página.
100%