Propiedad margin-top de CSS
La propiedad margin-top se utiliza para definir el margen superior de un elemento.
INFO
Esta propiedad no afecta a los elementos en línea, como <span>.
Los márgenes superior e inferior de un elemento pueden colapsarse en uno solo, que será igual al mayor de los dos márgenes. Sin embargo, esto solo ocurre con los márgenes verticales.
INFO
Se permiten valores negativos.
| 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 margin-top de CSS
css
margin-top: length | auto | initial | inherit;Ejemplo de la propiedad margin-top:
Ejemplo de la propiedad margin-top de CSS con valor en px
html
<!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 margin-top de CSS con valor en em
html
<!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 "%":
Ejemplo de la propiedad margin-top especificada en "%":
html
<!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":
Ejemplo de la propiedad margin-top con el valor "initial":
html
<!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":
Ejemplo de la propiedad margin-top con el valor "inherit":
html
<!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 | Probar |
|---|---|---|
| auto | Establece el margen superior. Es el valor predeterminado de esta propiedad. | Probar » |
| length | Define un margen superior en px, pt, cm, etc. El valor predeterminado es 0. | Probar » |
| % | Establece el margen superior en % del elemento contenedor. | Probar » |
| initial | Hace que la propiedad utilice su valor predeterminado. | Probar » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuál es la función de la propiedad 'margin-top' en CSS?