Vamos a usar un párrafo con las siguientes reglas de estilo:
.Parrafo1 {padding-left: 50%;
padding-right: 20px;
padding-top: 1em;
padding-bottom: 6pt;
background-color: yellow;
border: 1px solid;}
A este párrafo le hemos aplicado las cuatro propiedades
individuales para el relleno y para cada lado hemos usado una unidad de medida
distinta. Cuando se usa un porcentaje (como en padding-left) éste
se refiere al ancho del bloque de contención, es decir, a la caja del
elemento padre (en este ejemplo, es <BODY>). Como el color
de fondo del relleno es igual a la propiedad "background"
del elemento, hemos usado esta propiedad para definir un color amarillo de fondo.
En los siguientes párrafos se puede observar el efecto de usar la propiedad resumida "padding" con 1, 2, 3 y 4 valores.
Si se especifica un solo valor: padding: 2px, este
se aplica a los cuatro lados del párrafo:
Un párrafo con padding: 2px
Con dos valores especificados: padding: 20px 8px,
el primero (20px) se aplica a los rellenos superior e inferior, el segundo (8px)
se aplica a los rellenos derecho e izquierdo:
Un párrafo con padding: 20px 8px
Especificando tres valores, padding: 2em 12px 24px,
se aplican en este orden: El primero (2em) al relleno superior, el segundo (12px)
al derecho e izquierdo, y el tercero (24px) al inferior. Como se ve, se pueden
usar distintas unidades de medida para cada valor:
Un párrafo con padding: 2em 12px 24px
Finalmente, especificando cuatro valores, padding: 8px
0px 16px 24px, estos se aplican en este orden: arriba(8px), derecha(0px),
abajo(16px), izquierda(24px).
Un párrafo con padding: 8px 0px 16px 24px