CSS | Propiedad margin-top – Barcelona Geeks

La propiedad margin-top en CSS se usa para establecer el margen superior de un elemento. Establece el área de margen en la parte superior del elemento. El valor predeterminado de la propiedad margin-top es 0.

Sintaxis:

margin-top: length|auto|initial|inherit;

Valores de propiedad:

length: Se utiliza para especificar la longitud del margen con un valor fijo. Este valor puede ser positivo, negativo o cero.

Sintaxis:

margin-top: length;

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>margin-top property</title>
          
        <!-- margin-top CSS property -->
        <style>
            p {
                margin-top:50px; 
                background-color:green;
            }
        </style>
    </head>
          
    <body style = "background-color:lightgreen;">
          
        <!-- margin-top property used here -->
        <p style = "">
            This paragraph has 50px top margin .
        </p>
    </body>
</html>                    

Producción:
propiedad de margen superior

porcentaje (%): Se utiliza para especificar la cantidad de margen como un porcentaje relativo al ancho del elemento contenedor.

Sintaxis:

margin-top: %;

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>margin-top property</title>
          
        <!-- margin-top CSS property -->
        <style>
            p {
                margin-top:5%; 
                background-color:green;
            }
        </style>
    </head>
          
    <body style = "background-color:lightgreen;">
          
        <!-- margin-top property used here -->
        <p style = "">
            This paragraph has 5% top margin .
        </p>
    </body>
</html>                    

Producción:
propiedad de margen superior

auto: esta propiedad se utiliza cuando el navegador determina el margen superior.

Sintaxis:

margin-top: auto;

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>margin-top property</title>
          
        <!-- margin-top CSS property -->
        <style>
            h3 {
                margin-top:auto; 
                background-color:green;
            }
        </style>
    </head>
          
    <body style = "background-color:lightgreen;">
          
        <!-- margin-top property used here -->
        <h3 style = "">
            margin-top: auto;
        </h3>
    </body>
</html>                    

Producción:
propiedad de margen superior

initial Se utiliza para establecer la propiedad margin-top en su valor predeterminado.

Sintaxis:

margin-top: initial;

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>margin-top property</title>
          
        <!-- margin-top CSS property -->
        <style>
            h3 {
                margin-top:initial; 
                background-color:green;
            }
        </style>
    </head>
          
    <body style = "background-color:lightgreen;">
          
        <!-- margin-top property used here -->
        <h3 style = "">
            margin-top: initial;
        </h3>
    </body>
</html>                    

Producción:
propiedad de margen superior

heredar: se usa cuando la propiedad margin-top se hereda de su padre.

Sintaxis:

margin-top: inherit;

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>margin-top property</title>
          
        <!-- margin-top CSS property -->
        <style>
            .gfg {
                margin-top:100px;
            }
            h3 {
                margin-top:inherit; 
                background-color:green;
            }
        </style>
    </head>
          
    <body style = "background-color:lightgreen;">
          
        <div class = "gfg">
              
            <!-- margin-top property used here -->
            <h3 style = "">
                margin-top: inherit;
            </h3>
        </div>
    </body>
</html>                    

Producción:
propiedad de margen superior

Nota: Los márgenes superior e inferior de los elementos a veces se contraen en un solo margen que es igual al mayor de los dos márgenes. Esto no sucede en los márgenes horizontales (izquierdo y derecho), sino solo en el caso de los márgenes verticales (superior e inferior). Se llama Margen Colapso.

Navegadores compatibles: los navegadores compatibles con la propiedad margin-top se enumeran a continuación:

Google Chrome 1.0
Internet Explorer 6.0
Firefox 1.0
Ópera 3.5
Safari 1.0

Publicación traducida automáticamente

Artículo escrito por Lavisha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta