Relleno - CSS

Manejando las propiedades de Relleno....!

Explicación

Propiedad :

Relleno
Todo el relleno (arriba, derecha, abajo, izquierda) se puede combinar usando una simple etiqueta. Uso:
padding: 20px;
padding: 10px 20px 30px 10px;
padding: 10px 20px;
padding: 20px 10px 30px;

Definición:
El relleno se puede establecer usando la etiqueta "padding".
Toma los valores siguientes.
a)20px : Establecerá un relleno de 20px en los cuatro lados (arriba, derecha, abajo, izquierda).
b)10px 20px 30px 10px: Establecerá el relleno en orden de arriba, derecha, abajo, izquierda.
c)10px 20px : Establecerá el relleno de arriba y a la derecha. Abajo tomará el valor del relleno de arriba (10px) y izquierda tomará los valores de relleno de la derecha (20px).
d)20px 10px 30px: Establecerá el relleno para arriba y derecha y abajo. El izquierdo tomará valores del derecho.
Los valores pueden ser en porcentaje, puntos o píxeles.

Ejemplo 1:


<div align=right style="padding: 20px;">
Aqui hemos establecido un relleno de 20 píxeles.
Puedes ver que este parráfo tiene rellenos por todas las cuatro caras.
</div>

Resulta:


Aqui hemos establecido un relleno de 20 píxeles. Puedes ver que este parráfo tiene rellenos por todas las cuatro caras.

Ejemplo 2:


<div style="padding: 10px 50px 30px 5px;">
Aquí hemos establecido un relleno con cuatro valores.
Puedes ver que este parrafo tiene un relleno de 10px arriba, 50px a la derecha, 30px abajo y 5px a la izquieda.
</div>

Resulta:


Aquí hemos establecido un relleno con cuatro valores. Puedes ver que este parrafo tiene un relleno de 10px arriba, 50px a la derecha, 30px abajo y 5px a la izquieda.

Ejemplo 3:


<div style="padding: 20px 40px;">
Aquí hemos establecido un relleno con dos valores.
Puedes ver que este parrafo tiene rellenos de 20px arriba y abajo 40px a la izquieda y a la derecha.
</div>

Resulta:


Aquí hemos establecido un relleno con dos valores.Puedes ver que este parrafo tiene rellenos de 20px arriba y abajo 40px a la izquieda y a la derecha.

Ejemplo 4:


<div style="padding: 10px 50px 40px;">
Aquí hemos establecido un relleno con tres valores.
Puedes ver que este parrafo tiene un relleno de 10px arriba, 50px a la derecha, 40px abajo, el relleno de la izquierda toma valores de la derecha, osea 50px.
</div>

Resulta:


Aquí hemos establecido un relleno con tres valores. Puedes ver que este parrafo tiene un relleno de 10px arriba, 50px a la derecha, 40px abajo, el relleno de la izquierda toma valores de la derecha, osea 50px