La propiedad Style padding se utiliza para establecer o devolver el relleno de un elemento. La propiedad Style padding se puede utilizar de 4 maneras diferentes:
- div {padding: 30px} -En este caso, los cuatro lados tienen un relleno de 30px.
- div {padding: 100px 50px}: en este caso, el relleno superior e inferior será de 100 px, el relleno izquierdo y derecho será de 50 px.
- div {padding: 10px 20px 50px}: en este caso, el relleno superior será de 10 px, el relleno izquierdo y derecho será de 20 px, el relleno inferior será de 50 px.
- div {padding: 100px 10px 20px 40px}: en este caso, el relleno superior será de 100 px, el relleno de la derecha será de 10 px, el relleno de la parte inferior será de 20 px, el relleno de la izquierda será de 40 px.
Sintaxis:
- Para obtener el valor de la propiedad:
object.style.padding
- Para establecer el valor de la propiedad:
object.style.padding = "%|length|initial|inherit"
Valores devueltos: Devuelve un valor de string, que representa el relleno de un elemento.
Valores de propiedad:
- % : Se utiliza para definir el relleno en % del ancho del elemento padre.
- length : Se utiliza para definir el relleno 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 la propiedad de relleno de estilo:
Ejemplo 1: establecer el relleno {30px} para un elemento <div>:
html
<!DOCTYPE html>
<html>
<head>
<title>Style padding Property in HTML</title>
<style>
#samplediv {
border: 1px solid green;
}
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Style padding Property</h2>
<br>
<div id="samplediv">Geeksforgeeks</div>
<p>For setting the padding,
double click the "Set Padding" button: </p>
<br>
<button ondblclick="padding()">
Set Padding
</button>
<script>
function padding() {
document.getElementById("samplediv")
.style.padding = "30px";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: establecer el relleno {100px 50px} para un elemento <div>:
html
<!DOCTYPE html>
<html>
<head>
<title>Style padding Property in HTML</title>
<style>
#samplediv {
border: 1px solid green;
}
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Style padding Property</h2>
<br>
<div id="samplediv">Geeksforgeeks</div>
<p>For setting the padding,
double click the "Set Padding" button: </p>
<br>
<button ondblclick="padding()">Set Padding </button>
<script>
function padding() {
document.getElementById("samplediv")
.style.padding = "100px 50px";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 3: establecer el relleno {10px 20px 50px} para un elemento <div>:
html
<!DOCTYPE html>
<html>
<head>
<title>Style padding Property in HTML</title>
<style>
#samplediv {
border: 1px solid green;
}
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Style padding Property</h2>
<br>
<div id="samplediv">Geeksforgeeks</div>
<p>For setting the padding,
double click the "Set Padding" button: </p>
<br>
<button ondblclick="padding()">
Set Padding
</button>
<script>
function padding() {
document.getElementById("samplediv")
.style.padding = "10px 20px 50px";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 4: Establecer el relleno { 100px 10px 20px 40px} para un elemento <div>:
html
<!DOCTYPE html>
<html>
<head>
<title>Style padding Property in HTML</title>
<style>
#samplediv {
border: 1px solid green;
}
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Style padding Property</h2>
<br>
<div id="samplediv">Geeksforgeeks</div>
<p>For setting the padding,
double click the "Set Padding" button: </p>
<br>
<button ondblclick="padding()">
Set Padding
</button>
<script>
function padding() {
document.getElementById("samplediv")
.style.padding = "100px 10px 20px 40px";
}
</script>
</body>
</html>
- Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
- Antes de hacer clic en el botón:
Navegadores compatibles:
- 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