HTML | Estilo DOM marginBottom Propiedad

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

Sintaxis:

Devuelve el margen inferior del elemento.
```
object.style.marginBottom
```

Se utiliza para establecer el margen inferior de un elemento.

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

Valores devueltos: Devuelve un valor de string, que representa el margen inferior de un elemento.

Valores de propiedad:

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

Ejemplo:

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

Salida:
Antes de hacer clic en el botón:
length-before1
Después de hacer clic en el botón:
length-after1

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

Salida:
Antes de hacer clic en el botón:
length-before1
Después de hacer clic en el botón:
length-after1

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

Salida:
Antes de hacer clic en el botón:
length-after1
Después de hacer clic en el botón:
length-before1

initial: Esto se usa para establecer la propiedad en su valor predeterminado.
Ejemplo:

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

Salida:
Antes de hacer clic en el botón:
length-after1
Después de hacer clic en el botón:
length-before1

heredar: Esto se usa para heredar el valor del padre del elemento.
Ejemplo:

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

Salida:
Antes de hacer clic en el botón:
length-before1
Después de hacer clic en el botón:
length-after1

Navegadores compatibles: los navegadores compatibles con la propiedad marginBottom 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