HTML | Estilo DOM propiedad marginTop

La propiedad Style marginTop en HTML DOM se usa para establecer o devolver el margen superior de un elemento.

Sintaxis:

Devuelve la propiedad marginTop.
```
object.style.marginTop
```

Se utiliza para establecer la propiedad marginTop.

object.style.marginTop = "length|percentage|auto|initial|
inherit"

Valores devueltos: Devuelve un valor de string que representa el margen superior de un elemento

Valores de propiedad:

longitud: Se utiliza para especificar el margen en unidades fijas. Su valor por defecto es 0.

Ejemplo:

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style marginTop Property
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>DOM Style marginTop Property</b>
      
    <div class="container">
        <div class="div1">Line One</div>
        <div class="div2">Line Two</div>
          
        <button onclick="setMargin()">
            Change marginTop
        </button>
    </div>
  
    <!-- Script to set top margin -->
    <script>
        function setMargin() {
            elem = document.querySelector('.div1');
            elem.style.marginTop = '50px';
        }
    </script>
</body>
  
</html>                    

Producción:

Antes de hacer clic en el botón:

Después de hacer clic en el botón:
tiempo después

porcentaje: se utiliza para especificar la cantidad de margen como un porcentaje relativo al ancho del elemento contenedor.

Ejemplo:

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style marginTop Property
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>DOM Style marginTop Property</b>
      
    <div class="container">
        <div class="div1">Line One</div>
        <div class="div2">Line Two</div>
          
        <button onclick="setMargin()">
            Change marginTop
        </button>
    </div>
  
    <!-- Script to set top margin -->
    <script>
        function setMargin() {
            elem = document.querySelector('.div1');
            elem.style.marginTop = '20%';
        }
    </script>
</body>
  
</html>                    

Producción:

Antes de hacer clic en el botón:
Después de hacer clic en el botón:

automático: si el valor se establece en ‘automático’, el navegador calcula automáticamente un valor adecuado para el tamaño del margen.

Ejemplo:

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style marginTop Property
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>DOM Style marginTop Property</b>
      
    <div class="container">
        <div class="div1" style="margin-top: 50px;">
            Line One
        </div>
          
        <div class="div2">
            Line Two
        </div>
          
        <button onclick="setMargin()">
            Change marginTop
        </button>
    </div>
      
    <!-- Script to set top margin -->
    <script>
        function setMargin() {
            elem = document.querySelector('.div1');
            elem.style.marginTop = 'auto';
        }
    </script>
</body>
  
</html>                    

Producción:

Antes de hacer clic en el botón:

Después de hacer clic en el botón:
auto-después

initial: Se utiliza para establecer la propiedad en su valor predeterminado.

Ejemplo:

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style marginTop Property
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>DOM Style marginTop Property</b>
      
    <div class="container">
          
        <div class="div1" style="margin-top: 50px;">
            Line One
        </div>
          
        <div class="div2">
            Line Two
        </div>
          
        <button onclick="setMargin()">
            Change marginTop
        </button>
    </div>
      
    <!-- Script to set top margin -->
    <script>
        function setMargin() {
            elem = document.querySelector('.div1');
            elem.style.marginTop = 'initial';
        }
    </script>
</body>
  
</html>                    

Producción:

Antes de hacer clic en el botón:
Después de hacer clic en el botón:

heredar: se utiliza para heredar el valor de su elemento padre.

Ejemplo:

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style marginTop Property
    </title>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>DOM Style marginTop Property</b>
      
    <div class="container">
        <div class="div1" style="margin-top: 50px;">
            Line One
        </div>
          
        <div class="div2">
            Line Two
        </div>
          
        <button onclick="setMargin()">
            Change marginTop
        </button>
    </div>
      
    <!-- Script to set top margin -->
    <script>
        function setMargin() {
            elem = document.querySelector('.div1');
            elem.style.marginTop = 'inherit';
        }
    </script>
</body>
  
</html>                    

Producción:

Antes de hacer clic en el botón:
heredar-antes

Después de hacer clic en el botón:
heredar después

Navegadores compatibles: los navegadores compatibles con la propiedad marginTop de estilo DOM se enumeran a continuación:

Google Chrome
explorador de Internet
Firefox
Ópera
Safari

Publicación traducida automáticamente

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

Deja una respuesta Cancelar la respuesta