HTML | Estilo DOM paddingBottom Propiedad

La propiedad Style paddingBottom se usa para configurar o devolver el relleno inferior de un elemento.
La propiedad padding inserta el espacio deseado por el usuario dentro del borde de un elemento.

Sintaxis:

  • Para obtener la propiedad:
    object.style.paddingBottom
  • Para establecer el valor de la propiedad:
    object.style.paddingBottom = "%|length|initial|inherit"

Valores devueltos: Devuelve un String, que representa el relleno inferior de un elemento

Valores de propiedad :

  • %: se utiliza para definir el relleno inferior en % del ancho del elemento principal.
  • length : Se utiliza para definir el relleno inferior en unidades de longitud.
  • initial : se utiliza para establecer esta propiedad en su valor predeterminado.
  • heredar: se utiliza para heredar esta propiedad de su elemento padre.

El siguiente programa ilustra el método de propiedad Style paddingBottom:

Ejemplo: establecer el relleno inferior de un elemento <div>.

<!DOCTYPE html>
<html>
  
<head>
    <title>Style paddingBottom in HTML</title>
    <style>
        #MyElement {
            border: 1px solid black;
            background-color: green;
            width: 300px;
            height: 300px;
        }
          
        h1 {
            color: green;
        }
          
        h2 {
            font-family: Impact;
        }
          
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
  
    <h1>GeeksforGeeks</h1>
    <h2>Style paddingBottom</h2>
  
    <p>For setting the bottom padding, 
      double click the "Apply Bottom Padding" button: </p>
    <br>
  
    <button ondblclick="padding()">Apply Bottom Padding</button>
  
    <div id="MyElement">
        Geeksforgeeks is a portal for geeks.
    </div>
  
    <script>
        function padding() {
            document.getElementById("MyElement")
            .style.paddingBottom = "100px";
        }
    </script>
  
</body>
  
</html>         

Producción:

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

Navegadores compatibles: El navegador compatible con HTML | Las propiedades DOM Style paddingBottom se enumeran a continuación:

  • Google Chrome
  • explorador de Internet
  • Firefox
  • Ópera
  • safari de manzana

Publicación traducida automáticamente

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *