Los últimos tutoriales de desarrollo web
 

Style padding Property

<Estilo de objeto

Ejemplo

Establecer el relleno de un <div> elemento:

document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";
Inténtalo tú mismo "

Definición y Uso

Los conjuntos de propiedades de relleno o devuelve el relleno de un elemento.

Esta propiedad puede tomar de uno a cuatro valores:

Tanto la propiedad de margen y el espacio de inserción propiedad padding alrededor de un elemento. Sin embargo, la diferencia es que el margen inserta el espacio alrededor de la frontera, mientras que el relleno inserta el espacio dentro del borde de un elemento.

  • Uno de los valores, como: div {padding: 50px} - los cuatro lados tendrá un acolchado de 50 px
  • Dos valores, como: div {padding: 50px 10px} - la parte superior e inferior de relleno serán 50px, izquierda y relleno derecho serán 10px
  • Tres valores, como: div {padding: 50px 10px 20px} - el relleno superior será 50px, izquierda y relleno derecho será 10px, el acolchado inferior será de 20 píxeles
  • Cuatro valores, como: div {padding: 50px 10px 20px 30px} - el relleno superior será 50px, relleno derecho será 10px, el acolchado inferior será de 20 píxeles, relleno a la izquierda será 30px

Soporte del navegador

Internet ExplorerFirefoxOperaGoogle ChromeSafari

La propiedad padding es compatible con todos los principales navegadores.

Sintaxis

Devolver la propiedad padding:

object .style.padding

Establecer la propiedad padding:

object .style.padding=" Valores de propiedad
Valor Descripción
% Define el relleno en% de la anchura del elemento padre
length Define el relleno en unidades de longitud
initial Establece esta propiedad a su valor por defecto. Lea acerca inicial
inherit Hereda esta propiedad de su elemento padre. Lea acerca de heredar

Detalles técnicos

Valor por defecto: 0
Valor de retorno: Una cadena, que representa el acolchado de un elemento
Versión CSS CSS1

Más ejemplos

Ejemplo

Cambiar el relleno de los cuatro lados de un <div> elemento de "25px" :

document.getElementById("myDiv").style.padding = "25px";
Inténtalo tú mismo "

Ejemplo

Devolver el relleno de un <div> elemento:

alert(document.getElementById("myDiv").style.padding);
Inténtalo tú mismo "

Ejemplo

Diferencia entre la propiedad y el margen de la propiedad padding:

function changeMargin() {
    document.getElementById("myDiv").style.margin = "100px";
}

function changePadding() {
    document.getElementById("myDiv2").style.padding = "100px";
}
Inténtalo tú mismo "

Páginas relacionadas

CSS tutorial: Relleno CSS

Referencia CSS: padding property

<Estilo de objeto