Propiedad CSS margin-top
La propiedad CSS margin-top establece el margen superior de un elemento. Consulta los valores y ejemplos.
La propiedad margin-top establece el tamaño del margen superior de un elemento — el espacio transparente por encima de su caja, entre el borde superior del elemento y el elemento que está encima. Es el equivalente vertical de margin-bottom y uno de los cuatro lados controlados conjuntamente por el atajo margin.
Esta página explica los valores que acepta margin-top, los dos comportamientos que más sorprenden a las personas — el colapso de márgenes verticales y los porcentajes que se resuelven en función del ancho — y muestra ejemplos ejecutables para cada valor.
Esta propiedad no tiene efecto en elementos en línea no reemplazados como <span>. Para añadir espacio vertical alrededor de ellos, primero cámbialos a inline-block o block.
Colapso de márgenes verticales
Cuando el margen inferior de un bloque toca el margen superior del siguiente, los dos colapsan en un único margen igual al mayor de los dos, no a su suma. Así, un párrafo con margin-bottom: 30px seguido de otro con margin-top: 20px termina con 30px de espacio entre ellos, no 50px.
El colapso ocurre únicamente entre márgenes verticales (superior e inferior). Los márgenes izquierdo y derecho nunca colapsan. También se previene con cualquier elemento entre los dos márgenes — un borde, relleno, un elemento en línea, o un contexto de formato de bloque como un contenedor flex/grid o overflow distinto de visible.
Se permiten valores negativos. Un margin-top negativo empuja el elemento hacia arriba, solapándose o reduciendo la separación con el elemento que está encima.
| Valor inicial | 0 |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredado | No. |
| Animable | Sí. El margen superior del elemento es animable. |
| Versión | CSS2 |
| Sintaxis DOM | object.style.marginTop = "50px"; |
Sintaxis
Sintaxis de la propiedad CSS margin-top
margin-top: length | auto | initial | inherit;Ejemplo de la propiedad margin-top:
Ejemplo de la propiedad CSS margin-top con valor en 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
Ejemplo de la propiedad margin-top especificada en "em":
Ejemplo de la propiedad CSS margin-top con valor en 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>Ejemplo de la propiedad margin-top especificada en "%"
Un margin-top en porcentaje se resuelve en función del ancho del bloque contenedor, no de su altura. Es fácil pasarlo por alto: margin-top: 10% dentro de un padre de 600px de ancho equivale a 60px, y cambia cuando el padre se hace más ancho, aunque el margen sea 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>Ejemplo de la propiedad margin-top con el 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>Ejemplo de la propiedad margin-top con el 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
| Valor | Descripción | Pruébalo |
|---|---|---|
| length | Un margen superior fijo en px, em, pt, cm, etc. Puede ser negativo. El valor por defecto es 0. | Pruébalo » |
| % | Un margen superior establecido como porcentaje del ancho del bloque contenedor. | Pruébalo » |
| auto | El navegador calcula el valor. Para un margen superior, se resuelve como 0 (a diferencia de auto horizontal, que puede centrar un elemento). | Pruébalo » |
| initial | Restablece la propiedad a su valor por defecto (0). | Pruébalo » |
| inherit | Hereda el valor calculado del elemento padre. |
auto solo es útil para centrar con margin-left/margin-right. En un margen superior no tiene efecto de centrado y se comporta como 0.
Cuándo usar margin-top frente a padding-top
Usa margin-top para crear espacio fuera de un elemento, alejándolo de sus vecinos — y recuerda que esos márgenes pueden colapsar con el elemento de arriba. Usa padding-top cuando necesites espacio dentro de la caja, entre el borde y el contenido; el relleno nunca colapsa y está incluido en cualquier background visible.
Propiedades relacionadas
margin— el atajo que establece los cuatro márgenes a la vez.margin-bottom,margin-right,margin-left— los otros tres lados.box-sizing— controla cómo se relacionan el ancho/alto con el relleno y el borde en el modelo de caja.