Relleno (Padding)
El padding de un elemento es la cantidad de espacio entre el borde y el
contenido del elemento, hacia dentro.
Padding con 1 valor
Si sólo hay un valor, se aplica a los cuatro lados.
Por ejemplo, asignaremos un valor de 2em a los cuatro rellenos del cuadro.
Código CSS:
div {padding:1em;}
Resultado:
Este bloque tiene un relleno (padding de 1em) distribuido de forma homogenea en los cuatro lados del bloque.
Padding con 2 valores
Si hay dos valores 'el primero se aplica a los rellenos superior e inferior'
y el segundo se aplica a los rellenos izquierdo y derecho'.
Ejemplo:
Aplicaremos un valor de 3em a los rellenos superior e inferior y
5em para el relleno izquierdo y derecho.
div {padding:3em 5em;}
Padding con 3 valores
Si hay tres valores el primero se aplica al relleno superior, el segundo
a los rellenos izquierdo y derecho y el tercero al relleno inferior.
Ejemplo:
Aplicaremos un valor de 2em al relleno superior, a los rellenos izquierdo y derecho
asignaremos 4em y al relleno inferior le damos un valor de 5em.
div {padding:2em 4em 5em;}
Padding con 4 valores
Si hay cuatro valores el primero se aplica al relleno superior, el segundo
al relleno derecho, el tercero al relleno inferior, y el cuarto al relleno izquierdo.
Ejemplo:
Aplicaremos un valor de 1em al relleno superior, 3em al derecho, cero al inferior y 7em
al izquierdo.
div {padding:1em 3em 0 7em;}
Asignando rellenos por cada lado
En el
diseño web a veces deseamos asignarle valor solo a un lado
del cuadro y dejar las demás como están. Mediante las anteriores propiedades tambien se puede hacer dando valor cero al resto de rellenos.
existen otras alternativas para hacerlo y los presentamos a continuación.
Padding-top (relleno superior)
Ejemplo:
Aplicaremos un valor de 1em al relleno superior.
h1 {padding-top:1em;}
Padding-right (relleno derecho)
Ejemplo:
Aplicaremos un valor de 5em al relleno derecho.
h1 {padding-right:5em;}
Padding-bottom (relleno inferior)
Ejemplo:
Aplicaremos un valor de 2em al relleno inferior.
h1 {padding-bottom:2em;}
Padding-left (relleno izquierdo)
Ejemplo:
Aplicaremos un valor de 2.5em al relleno izquierdo.
h1 {padding-left:2em;}
