La propiedad Style paddingLeft se usa para establecer o devolver el relleno izquierdo 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.paddingLeft
- Para establecer la propiedad:
object.style.left = "auto|length|%|initial|inherit"
Valores devueltos: Devuelve un valor de string, que representa el relleno izquierdo de un elemento
Valores de propiedad :
- auto : se utiliza para permitir que el navegador establezca la posición izquierda.
- length : Se utiliza para definir el relleno izquierdo en unidades de longitud.
- % : Se utiliza para definir el relleno izquierdo en % del ancho del elemento padre.
- 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 paddingLeft:
Ejemplo: Establecer el relleno izquierdo de un elemento <div>.
html
<!DOCTYPE html>
<html>
<head>
<title>Style paddingLeft 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 paddingLeft</h2>
<p>For setting the left padding,
double click the "Apply Left Padding" button: </p>
<br>
<button ondblclick="padding()">Apply Left Padding</button>
<div id="MyElement">
Geeksforgeeks is a portal for geeks.
</div>
<script>
function padding() {
document.getElementById("MyElement")
.style.paddingLeft = "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 DOM | Las propiedades Style paddingLeft se enumeran a continuación:
- Google Chrome 1 y superior
- Borde 12 y superior
- Internet Explorer 4 y superior
- Firefox 1 y superior
- Ópera 3.5 y superior
- Apple Safari 1 y superior
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