Propriedade CSS margin-top
A propriedade CSS margin-top define a margem superior de um elemento. Veja os valores e exemplos da propriedade.
A propriedade margin-top define o tamanho da margem superior de um elemento — o espaço transparente acima da sua caixa, entre a borda superior do elemento e o elemento acima dele. É o equivalente vertical de margin-bottom e um dos quatro lados controlados em conjunto pelo atalho margin.
Esta página explica os valores aceitos por margin-top, os dois comportamentos que mais surpreendem as pessoas — colapso de margens verticais e percentagens resolvidas em relação à largura — e apresenta exemplos executáveis para cada valor.
Esta propriedade não tem efeito em elementos inline não substituídos, como <span>. Para adicionar espaço vertical ao redor deles, torne-os inline-block ou block primeiro.
Colapso de margens verticais
Quando a margem inferior de um bloco toca a margem superior do próximo, as duas colapsam em uma única margem igual à maior das duas — não à soma delas. Assim, um parágrafo com margin-bottom: 30px seguido de outro com margin-top: 20px resulta em 30px de espaço entre eles, não 50px.
O colapso ocorre apenas entre margens verticais (superior e inferior). Margens esquerda e direita nunca colapsam. Ele também é impedido por qualquer coisa entre as duas margens — uma borda, padding, um elemento inline, ou um contexto de formatação de bloco como um contêiner flex/grid ou overflow diferente de visible.
Valores negativos são permitidos. Um margin-top negativo puxa o elemento para cima, sobrepondo ou reduzindo o espaço em relação ao elemento acima dele.
| Initial Value | 0 |
|---|---|
| Applies to | All elements. It also applies to ::first-letter. |
| Inherited | No. |
| Animatable | Yes. Top margin of the element is animatable. |
| Version | CSS2 |
| DOM Syntax | object.style.marginTop = "50px"; |
Sintaxe
Sintaxe da Propriedade CSS margin-top
margin-top: length | auto | initial | inherit;Exemplo da propriedade margin-top:
Exemplo da Propriedade CSS margin-top com valor px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.margin-top {
margin-top: 100px;
}
</style>
</head>
<body>
<h2>Margin-top property example</h2>
<p>No specified margin.</p>
<p class="margin-top"> 100px margin is specified top for this text.</p>
</body>
</html>Resultado
Exemplo da propriedade margin-top especificada em "em":
Exemplo da Propriedade CSS margin-top com valor em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.example {
margin-top: 5em;
}
</style>
</head>
<body>
<h2>Margin-top property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Exemplo da propriedade margin-top especificada em "%"
Um margin-top em porcentagem é resolvido em relação à largura do bloco contêiner — não à sua altura. É fácil passar por isso despercebido: margin-top: 10% dentro de um pai com 600px de largura equivale a 60px, e muda quando o pai fica mais largo, mesmo que a margem seja vertical.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.margin-top {
margin-top: 10%;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Margin-top property example</h2>
<p>No specified margin.</p>
<p class="margin-top"> 10% margin is specified top for this text.</p>
</body>
</html>Exemplo da propriedade margin-top com o valor "initial":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.margin-top {
margin-top: initial;
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>Margin-top property example</h2>
<p>No specified margin.</p>
<p class="margin-top"> Margin top is specified for this text.</p>
</body>
</html>Exemplo da propriedade margin-top com o valor "inherit":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-top: 50px;
}
.margin-top {
margin-top: inherit;
background-color: lime;
}
</style>
</head>
<body>
<h2>Margin-top property example</h2>
<div>
Here is some text.
<p class="margin-top"> Margin top is specified for this text.</p>
</div>
</body>
</html>Valores
| Value | Description | Play it |
|---|---|---|
| length | Uma margem superior fixa em px, em, pt, cm, etc. Pode ser negativa. O padrão é 0. | Play it » |
| % | Uma margem superior definida como porcentagem da largura do bloco contêiner. | Play it » |
| auto | O navegador calcula o valor. Para uma margem superior, isso resolve para 0 (ao contrário de auto horizontal, que pode centralizar um elemento). | Play it » |
| initial | Redefine a propriedade para seu valor padrão (0). | Play it » |
| inherit | Herda o valor calculado do elemento pai. |
auto é útil apenas para centralizar com margin-left/margin-right. Em uma margem superior, não tem efeito de centralização e se comporta como 0.
Quando usar margin-top vs. padding-top
Use margin-top para criar espaço fora de um elemento, afastando-o dos seus vizinhos — e lembre-se de que essas margens podem colapsar com o elemento acima. Use padding-top quando precisar de espaço dentro da caixa, entre a borda e o conteúdo; o padding nunca colapsa e é incluído em qualquer background visível.
Propriedades relacionadas
margin— o atalho que define as quatro margens de uma vez.margin-bottom,margin-right,margin-left— os outros três lados.box-sizing— controla como largura/altura se relacionam com padding e borda no modelo de caixa.