Padding en CSS: Aprendiendo sus secretos

El padding o como su nombre lo indica "relleno" es el espacio interior en un contenedor con los objetos que contiene, a diferencia del Margin que es la separación con otros objetos contenedores u objetos de linea o de caja.

El padding se forma de 4 partes: Alto, izquierda, abajo y derecha, esto es; dos valores verticales y dos horizontales.

La regla css básica de padding es:

padding: n + unidad;

Por ejemplo si se lo agregaramos a una div:

<div style="padding:10px;widht:200px;"> contenido </div> 

Esto significa que el espacio entre el div y el contenido es de 10 pixeles, con un div de 200 pixeles:

contenido

Sin embargo, se darán cuenta que si miden el div, su verdadero ancho será de 220 pixeles, esto es porque el padding empuja el contenido a partir del valor puesto en width o ancho y height o alto. 

Para este caso en vertical y horizontal se agregan 10px por lado se suman 20px en vertical y 20px en horizontal.

Formas verticales y horizontales
Podemos agregar 4 tipos de padding con diferentes para poner un padding específico que son arriba, derecha, abajo e izquierda:

"padding-top:10px;"
<div style="padding-top:10px;width: 200px;"> contenido </div>

contenido

"padding-right:10px;"
<div style="padding-right:10px;width: 200px;"> contenido </div>

contenido

"padding-bottom:10px;"
<div style="padding-bottom:10px;width: 200px;"> contenido </div>

contenido

"padding-left:10px;"
<div style="padding-left:10px;width: 200px;"> contenido </div>

contenido

Al mismo tiempo diferentes tamaños horizontales y verticales
<div style="padding-top:30px;padding-right:20px;padding-bottom:10px;padding-left:5px;width: 200px;"> contenido </div>

contenido

Regla del reloj y modo resumido
Finalmente podemos evitar poner padding-vertical o padding-horizontal y hacerlo directamente en una solo instrucción padding.

Por ejemplo; "padding:30px 20px 10px 5px;", dará el mismo resultado que arriba:
<div style="padding:30px 20px 10px 5px;width: 200px;"> contenido </div>

contenido

Ya se habrán dado cuenta que primero va el valor top o arriba, luego right o derecha, bottom o abajo y left o izquierda. Esto es porque primero van los valores verticales y luego horizontales y se ordenan en sentido de las manecillas del reloj.

Valores horizontales y verticales iguales
Esto permite, por ejemplo que; si top y bottom tuviera el mismo valor (40px), y left y right tuvieran el mismo valor (20px), podríamos resumirlos de esta forma:

"padding:40px 20px;"
<div style="padding:40px 20px;width: 200px;"> contenido </div>

contenido

Como pueden ver tanto arriba como abajo los valores de padding serán de 40px para cada lado, mientras que derecha e izquierda adquieren por su parte 20px usando un único valor debido a que se ordenaron de forma: "padding: verticales + horizontales;".

Dos valores iguales, dos diferentes
De igual forma podríamos dar tres valores si bottom o abajo es diferente a top o arriba y los horizontales son iguales:

"padding:40px 5px 20px;"
<div style="padding:40px 5px 20px;width: 200px;"> contenido </div>

contenido

Como pueden apreciar, arriba tienen un valor de 40px, abajo 20px y tanto izquierda y derecha comparte 5px y como ordenamos y como se ordenan top, right, bottom y left, esto es 40px 5px 20px, nos ahorramos poner el último valor para la separación izquierda.

Conclusiones
El uso de padding lo podemos usar en casi cualquier elemento de línea o de caja como las etiquetas P, SPAN, DIV, H1, H2, etcétera.

En la implementación con medidas de ancho o alto, siempre debe considerarse el espacio que agregan, si se trabaja con float, es mejor evitar que los contenedores tengan padding.