En este artículo, vamos a discutir la propiedad margin-top que especifica el margen superior de un elemento.
Para especificar el margen superior de un elemento, CSS proporciona un elemento de estilo llamado margin-top que establece el margen superior de un elemento. Esta propiedad acepta un valor entero. El valor predeterminado es 0 y también se permiten valores negativos. La sintaxis de la propiedad margin-top se proporciona a continuación.
Sintaxis:
margin-top: length | auto | initial | inherit;
Valores de propiedad:
- longitud: el parámetro de longitud especifica la longitud del margen superior en px, cm, %.
- auto: el propio navegador establece automáticamente el margen superior.
- initial: establece la propiedad en el valor predeterminado.
- heredar: hereda el valor de la propiedad de los componentes principales.
Veamos algunos ejemplos de cómo especificar el margen superior de un elemento.
Ejemplo 1: En este ejemplo, veamos la diferencia entre un elemento que tiene un margen superior y un elemento sin la propiedad de margen superior.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p#p1 {
margin-top: 50px;
}
</style>
</head>
<body>
<h2>Welcome To GFG</h2>
<p id="p1">Top Margin set to 50px</p>
<p>No top margin</p>
</body>
</html>
Producción
Ejemplo 2: Aquí, en el siguiente código, intentemos aplicar cada valor de propiedad de margen superior a los elementos <h4>.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
margin-top: 1.5cm;
}
h4.p1 {
margin-top: 20px;
}
h4.p2 {
margin-top: 8%;
}
h4.p3 {
margin-top: auto;
}
h4.p4 {
margin-top: initial;
}
h4.p5 {
margin-top: inherit;
}
</style>
</head>
<body>
<h4 class="p1">Top-margin:20px</h4>
<h4 class="p2">Top-margin:8%</h4>
<h4 class="p3">Top-margin:auto</h4>
<h4 class="p4">Top-margin:initial</h4>
<div class="parent">
<h4 class="p5">Top-margin:inherit</h4>
</div>
</body>
</html>
Producción
Publicación traducida automáticamente
Artículo escrito por akhilvasabhaktula03 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA