CSS Margin
Use a propriedade CSS margin para criar espaço ao redor do conteúdo de um elemento HTML fora das bordas. As propriedades são top, bottom, left e right.
A propriedade CSS margin cria espaço ao redor de um elemento — fora de sua borda. Ao contrário do padding, que adiciona espaço dentro da borda (entre o conteúdo e a borda), o margin empurra os elementos vizinhos para longe. O margin é sempre transparente: ele nunca exibe uma cor de fundo, apenas adiciona espaço vazio.
Este capítulo aborda as quatro propriedades de lados individuais, o shorthand margin (de um a quatro valores), os valores especiais auto e inherit, como as margens em porcentagem são calculadas, margens negativas e a regra de colapso de margens que surpreende quase todo mundo na primeira vez que a encontra.
Os lados individuais
Com a ajuda das propriedades a seguir, você pode definir a margem de cada lado de um elemento:
Já é evidente que para o topo usamos margin-top, para a base margin-bottom, para o lado esquerdo margin-left e para o direito margin-right.
Todas as propriedades de margin aceitam os seguintes valores:
auto- a margem é calculada pelo navegador (usada para centralizar elementos de bloco horizontalmente),length- especifica uma margem empx,pt,cm,rem,em, etc.,%- especifica uma margem como porcentagem da largura do elemento contêiner,inherit- especifica que a margem deve ser herdada do elemento pai.
Um detalhe sutil, mas importante: margens em porcentagem são sempre relativas à largura do bloco contêiner, mesmo para margin-top e margin-bottom. Portanto, margin-top: 10% dentro de um contêiner com 600px de largura equivale a 60px, e não a 10% da altura.
O margin também pode receber valores negativos, que puxam um elemento para mais perto (ou sobre) seus vizinhos. Consulte Margens negativas abaixo.
Margin como propriedade shorthand
A propriedade CSS margin é uma propriedade shorthand para as propriedades de margem individuais abaixo:
Quando a propriedade margin possui quatro valores diferentes, ela aparece assim no código:
CSS com margens diferentes
p {
margin-top: 25px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
}Se todos os lados tiverem o mesmo valor, por exemplo, todos com 50px, em CSS podemos escrevê-lo assim.
CSS com a mesma margem, código
p {
margin: 50px;
}Quando os lados superior e inferior têm o mesmo valor (por exemplo, 15px) e os lados esquerdo e direito têm o mesmo valor (por exemplo, 10px), você pode usar o código a seguir.
CSS margin com 2 valores, código
p {
margin: 15px 10px;
}Isso equivale a:
CSS margin com 2 valores, forma longa, código
p {
margin-top: 15px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
}Quando os lados esquerdo e direito são iguais (por exemplo, 15px), o lado superior é 5px e o inferior é 10px, você pode escrever:
CSS margin com 3 valores, código
p {
margin: 5px 15px 10px;
}Isso equivale a:
CSS margin com 3 valores, forma longa, código
p {
margin-top: 5px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
}Exemplo da propriedade margin:
Código da propriedade CSS margin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: white;
margin: 25px 10px 15px 20px;
}
</style>
</head>
<body>
<p>Paragraph with background-color, color and margin properties.</p>
</body>
</html>Resultado
O valor auto da propriedade margin
Você pode centralizar horizontalmente um elemento dentro de seu contêiner definindo a propriedade margin como auto. Com isso, o elemento ocupará sua largura definida e o espaço restante será dividido igualmente entre as margens direita e esquerda.
Exemplo da propriedade margin com o valor "auto":
Exemplo do uso do valor "auto" da propriedade margin:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
margin: auto;
background-color: red;
}
</style>
</head>
<body>
<h2>The auto value</h2>
<p>
Setting the “auto” value of the margin property you can horizontally center the element inside its container. As a result, the element will take up the defined width and the space that remains, will be divided between the right and left margins.
</p>
<div>
The auto value horizontally centered this div.
</div>
</body>
</html>O valor inherit da propriedade margin
No exemplo abaixo, a margem esquerda do elemento <p> é herdada de seu elemento pai (<div>):
Exemplo da propriedade margin com o valor "inherit":
Exemplo do uso do valor "inherit" da propriedade margin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: lightblue;
margin-left: 100px;
}
p.inherit {
margin-left: inherit;
padding: 10px 0;
}
</style>
</head>
<body>
<h2>The inherit value</h2>
<p>
Here the left margin is inherited from its parent element:
</p>
<div>
<p class="inherit">
With the help of the "inherit" value, the left margin is inherited from the div element.
</p>
</div>
</body>
</html>Colapso de margens
Quando duas margens verticais se encontram, elas não se somam — elas colapsam em uma única margem igual à maior das duas. Essa é a surpresa mais comum com margens: se um parágrafo tem margin-bottom: 30px e o seguinte tem margin-top: 20px, o espaço entre eles será de 30px, não 50px.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.top { margin-bottom: 30px; background: #1c87c9; color: #fff; }
.bottom { margin-top: 20px; background: #2eae44; color: #fff; }
</style>
</head>
<body>
<p class="top">My bottom margin is 30px.</p>
<p class="bottom">My top margin is 20px. The gap between us is 30px, not 50px.</p>
</body>
</html>Algumas regras importantes para lembrar:
- Apenas as margens superior e inferior colapsam. As margens esquerda e direita (horizontais) nunca colapsam — elas sempre se somam.
- Um elemento pai e seu primeiro/último filho podem colapsar juntos, a menos que algo os separe (uma borda, padding,
overflowdiferente devisible, ou um contêiner flex/grid). - Elementos vazios colapsam suas próprias margens superior e inferior em uma só.
Se você precisar de um espaçamento garantido, prefira padding, uma borda ou use um layout flex/grid com gap — margens dentro de contêineres flex e grid não colapsam.
Margens negativas
Uma margem negativa puxa um elemento na direção da margem, frequentemente sobrepondo um vizinho. Um margin-top ou margin-left negativos deslocam o próprio elemento; um margin-right ou margin-bottom negativos puxam o conteúdo seguinte para mais perto.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
background-color: #1c87c9;
color: #fff;
padding: 10px;
}
.pulled {
margin-top: -15px;
}
</style>
</head>
<body>
<div class="box">First box</div>
<div class="box pulled">This box is pulled 15px up to overlap the first one.</div>
</body>
</html>Margens negativas são úteis para sobrepor cards, puxar um elemento para fora do padding de seu contêiner ou fazer ajustes finos de alinhamento — mas use-as com moderação, pois podem criar sobreposições difíceis de depurar.
Propriedades de margem lógicas
O CSS moderno também oferece propriedades lógicas que seguem a direção de escrita do texto em vez dos lados físicos da tela — úteis para sites que suportam idiomas tanto da esquerda para a direita quanto da direita para a esquerda:
margin-inline-start/margin-inline-end— o início/fim do eixo inline (texto),margin-block-start/margin-block-end— o início/fim do eixo de bloco,- shorthands
margin-inlineemargin-block(por ex.,margin-inline: autopara centralizar horizontalmente tanto em LTR quanto em RTL).
Em uma página padrão da esquerda para a direita, margin-inline-start se comporta como margin-left e margin-block-start como margin-top, mas eles são invertidos automaticamente para conteúdo da direita para a esquerda.
Capítulos relacionados
- CSS Padding — espaço dentro da borda.
- CSS box-sizing — como largura, padding e borda são somados.
- margin-top, margin-right, margin-bottom, margin-left — as propriedades de lado individuais.