CSS: Margens e Preenchimento CSS
Última atualização: 2026-10-13
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).
1. Preenchimento
padding é o espaço entre a área de conteúdo e a borda — o "espaço em branco interno" do elemento.
▶ Exemplo
▶ Experimente(1) Definindo Lados Individuais
▶ Exemplo
▶ Experimente(2) 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;
(3) Casos de Uso Comuns de Preenchimento
▶ Exemplo
▶ Experimente(4) 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.
- A área de preenchimento mostra a cor de fundo e imagens do elemento
- Preenchimento torna elementos "maiores" (a menos que use
box-sizing: border-box) - Elementos inline (como
<span>) só têm preenchimento efetivo horizontalmente
2. Margem
margin é o espaço entre a borda do elemento e outros elementos — o "espaçamento externo" do elemento.
▶ Exemplo
▶ Experimente(1) 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 */
(2) Casos de Uso Comuns de Margem
▶ Exemplo
▶ Experimente(3) Usando margin: auto para Centralização
margin: 0 auto pode centralizar horizontalmente um elemento de bloco dentro de seu pai:
▶ Exemplo
▶ Experimente3. 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.
(1) Cenário 1: Irmãos Adjacentes
▶ Exemplo
▶ Experimente(2) 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
▶ ExperimenteMétodos de evasão:
- Adicionar
padding: 1pxao pai (ou qualquer valor positivo) - Adicionar
border: 1px solid transparentao pai - Adicionar
overflow: hiddenao pai - Usar layout flex ou grid
(3) Cenário 3: Elementos Vazios
Um elemento de bloco sem conteúdo, preenchimento ou borda também terá suas margens superior e inferior colapsadas.
(4) Casos Onde Margens Não Colapsam
- Margens horizontais (esquerda/direita) não colapsam
- Filhos de layout flex não colapsam
- Elementos flutuados não colapsam
- Elementos posicionados absolutamente não colapsam
4. 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
P 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.P 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.P 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
- preenchimento e margem são as propriedades de espaçamento mais usadas no layout CSS
- preenchimento controla espaço em branco interno, margem controla espaçamento externo
- Entender suas regras abreviadas e a armadilha do "colapso de margem" é conhecimento essencial para layouts confiáveis
- Definir globalmente
box-sizing: border-boxno início do projeto previne que preenchimento expanda elementos e simplifica cálculos de dimensão
📝 Exercícios
- Crie uma página de "grupo de cards" com 3 cards, usando margem para controlar espaçamento entre cards.
- Crie uma barra de navegação usando preenchimento para controlar a distância texto-borda em cada item de navegação.
- Demonstre "colapso de margem" e resolva com pelo menos dois métodos diferentes.
- Use
margin: 0 autopara centralizar horizontalmente um contêiner de 800px de largura na página.
