paddingLeft : Se utiliza para modificar u obtener el relleno izquierdo de un elemento.
- Diferencia con marginLeft:
tanto la propiedad marginLeft como la propiedad paddingLeft insertan el espacio izquierdo en un elemento. Sin embargo, la diferencia es que marginLeft inserta el espacio alrededor del borde, mientras que paddingLeft inserta el espacio dentro del borde a la izquierda de un elemento.
Sintaxis:
- Devuelve la propiedad paddingLeft.
object.style.paddingLeft
- Establece la propiedad paddingLeft.
object.style.paddingLeft = "%|length|initial|inherit"
Valor devuelto: Devuelve el valor de string que representa el relleno izquierdo de un elemento.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>DOM Style paddingLeft Property </title>
<style>
#Geek_1 {
color: green;
width: 50%;
}
#Geek_Center {
width: 400px;
background: yellow;
}
</style>
</head>
<body bgcolor="green">
<center id="Geek_Center">
<h1 id="Geek_1">
GeeksForGeeks
</h1>
<h2>DOM Style paddingLeft Property </h2>
<br>
<button type="button" onclick="geeks()">
Click to change
</button>
<script>
function geeks() {
// Set padding left using
// length unit.
document.getElementById(
"Geek_Center").style.paddingLeft =
"50px";
}
</script>
</center>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo-2:
<!DOCTYPE html>
<html>
<head>
<title>DOM Style paddingLeft Property </title>
<style>
#Geek_1 {
color: green;
width: 50%;
}
#Geek_Center {
width: 400px;
background: yellow;
}
</style>
</head>
<body bgcolor="green">
<center id="Geek_Center">
<h1 id="Geek_1">
GeeksForGeeks
</h1>
<h2>DOM Style paddingLeft Property </h2>
<br>
<button type="button" onclick="geeks()">
Click to change
</button>
<script>
function geeks() {
// Set 'left padding'
// using %.
document.getElementById(
"Geek_Center").style.paddingLeft =
"20%";
}
</script>
</center>
</body>
</html>
Producción:
Antes de hacer clic en el botón: 
Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con la propiedad DOM Style paddingLeft se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Mozilla Firefox
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA