Propriedade Margin
Última atualização: 2026-09-13
margin Propriedade Margin
A propriedade margin define o espaço ao redor de um elemento, ou seja, a distância entre sua borda e os elementos vizinhos. É uma das propriedades do modelo de caixa mais usadas, servindo para controlar o espaçamento entre elementos, centralizar elementos horizontalmente e adicionar respiro. As margens podem ser comprimentos fixos, porcentagens ou auto para valores calculados pelo navegador.
| Categoria | |
|---|---|
| Valor Inicial | 0 |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | length |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
margin: <length> | <percentage> | auto;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | Palavra-chave | O navegador calcula a margin automaticamente. |
<length> | Tipo | Um valor de margin fixo. |
<percentage> | Tipo | Uma porcentagem relativa à largura do bloco que a contém. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| margin | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Aviso： Margens verticais adjacentes sofrem colapso (margin collapse): o espaço real é o maior dos dois valores, não a soma.
Dica： margin:0 auto; centraliza horizontalmente um elemento de nível de bloco dentro de seu pai (precisa de uma largura definida).
❓ Perguntas Frequentes
QQual é a diferença entre margin e padding?
Amargin é o espaço fora da borda, controlando a distância de elementos vizinhos e bordas do contêiner, e valores negativos são permitidos. padding é o espaço entre o conteúdo e a borda, controlando a distância do conteúdo às bordas da caixa, e não pode ser negativo. padding também estende o fundo e a área de clique, o que margin não faz, e apenas margens verticais sofrem colapso. Em caso de dúvida, use margin para lacunas de layout e padding para respiro interno.
QPor que margin:auto centraliza apenas horizontalmente, não verticalmente?
AElementos de nível de bloco dividem automaticamente o espaço de margin horizontal restante entre esquerda e direita, o que os centraliza; o fluxo normal não tem mecanismo equivalente para o eixo vertical. Para centralizar verticalmente, torne o pai um contêiner flex com display:flex; align-items:center; justify-content:center, ou um contêiner grid com display:grid; place-items:center. Em grid você também pode usar margin:auto no próprio item, já que auto margins absorvem o espaço livre em ambos os eixos.
QO que é margin collapse?
ANa direção vertical, as margens superior e inferior de elementos adjacentes não se somam; o espaço é o maior dos dois valores. Isso é o margin collapse. O margin-top de um filho também pode escapar do pai e empurrar o próprio pai para baixo. Para evitá-lo, adicione padding ou border ao pai, defina overflow:hidden, ou use flex ou grid. Margens horizontais nunca sofrem colapso, então isso afeta apenas o espaçamento vertical.
QA porcentagem da margin é relativa a quê?
AAs margens são sempre resolvidas em relação à largura do bloco que a contém, seu tamanho inline, incluindo margin-top e margin-bottom, que são calculadas a partir da largura em vez da altura. Por exemplo, com um pai de 400px de largura, margin-top:10% equivale a 40px. É uma regra intencional do CSS que muitas vezes surpreende as pessoas, então vale a pena lembrar ao usar margens em porcentagem, especialmente para espaçamento vertical em layouts responsivos.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Modelo de Caixa CSS
Entenda a relação entre content, padding, border e margin.
padding (Propriedade Padding)
Aprenda sobre o espaço dentro de um elemento.
