Propiedad de relleno de estilo
Ejemplo
Establezca el relleno de un elemento <div>:
document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";
Definición y uso
La propiedad de relleno establece o devuelve el relleno de un elemento.
Esta propiedad puede tomar de uno a cuatro valores:
Tanto la propiedad de margen como la propiedad de relleno insertan espacio alrededor de un elemento. Sin embargo, la diferencia es que margin inserta el espacio alrededor del borde, mientras que padding inserta el espacio dentro del borde de un elemento.
- Un valor, como: div {padding: 50px} - los cuatro lados tendrán un relleno de 50px
- Dos valores, como: div {padding: 50px 10px}: el relleno superior e inferior será de 50 px, el relleno izquierdo y derecho será de 10 px
- Tres valores, como: div {padding: 50px 10px 20px}: el relleno superior será de 50 px, el relleno izquierdo y derecho será de 10 px, el relleno inferior será de 20 px
- Cuatro valores, como: div {padding: 50px 10px 20px 30px} - el relleno superior será 50px, el relleno derecho será 10px, el relleno inferior será 20px, el relleno izquierdo será 30px
Compatibilidad con navegador
| Property | |||||
|---|---|---|---|---|---|
| padding | Yes | Yes | Yes | Yes | Yes |
Sintaxis
Devuelve la propiedad de relleno:
object.style.padding
Establezca la propiedad de relleno:
object.style.padding = "%|length|initial|inherit"
Valores de propiedad
| Value | Description |
|---|---|
| % | Defines the padding in % of the width of the parent element |
| length | Defines the padding in length units |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Detalles técnicos
| Valor por defecto: | 0 |
|---|---|
| Valor devuelto: | Una cadena, que representa el relleno de un elemento. |
| Versión CSS | CSS1 |
Más ejemplos
Ejemplo
Cambie el relleno de los cuatro lados de un elemento <div> a "25px":
document.getElementById("myDiv").style.padding = "25px";
Ejemplo
Devuelve el relleno de un elemento <div>:
alert(document.getElementById("myDiv").style.padding);
Ejemplo
Diferencia entre la propiedad de margen y la propiedad de relleno:
function changeMargin() {
document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
document.getElementById("myDiv2").style.padding = "100px";
}
páginas relacionadas
Tutorial de CSS: relleno CSS
Referencia CSS: propiedad de relleno
❮ Objeto de estilo