Padding o margin

Algo con lo que solía confundir eran el empleo de los atributos padding y margin. Una imagen vale más que mil palabras, así que la siguiente imagen muestra qué es cuál.

Como podés ver, los márgenes son el espacio que hay entre la capa y cualquier objeto adyacente. El (o padding) es el espacio entre el borde de la capa y el contenido. (El borde es la línea que delimita la capa)

MARGIN

Para establecer los márgenes mediante código CSS, exisiten distintas formas y es importante conocerlas todas para poder leer fácilmente el código css e interpretarlo. Por defecto, cada capa tiene 4 márgenes que vienen con un valor 0.

/*Aplicando los 4 márgenes de la forma natural*/
#capa    {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
/*Aplicando los 4 márgenes de forma simplificada*/
#capa    {
margin: 10px;
}
/*Cuando el márgen de arriba es igual al márgen de abajo, y el márgen de la derecha es igual al márgen de la izquierda, se puede usar el siguiente formato, tomando en cuenta que el primer valor corresponde a los de arriba y abajo y el segundo valor a los de la derecha e izquierda*/
#capa   {
margin: 10px 5px;
}
/*Cuando los valores de la derecha e izquierda son los mismos y únicamente varían el de arriba con el de abajo, se procede con el siguiente formato, tomando en cuenta que el primer valor corresponde al márgen de arriba, el segundo a los de la derecha e izquierda y el tercero al de abajo*/
#capa    {
margin: 5px 15px 2px;
}
/*Cuando todos los márgenes son distintos uno del otro, entonces se procede a colocar cada valor, tomando en cuenta que el primer valor corresponde al de arriba, segundo: derecha, tercero: abajo y cuarto: izquierda (tal como las manecillas del reloj) */
#capa    {
margin: 3px 10px 6px 8px;
}

PADDING

Al igual que el MARGIN, se tiene 4 rellenos y por defecto vienen en valor 0. El código css se establece de la misma manera.

IMPORTANTE

El ancho real y el alto real de una capa se ve directamente afectado con los valores (de width y height) de sus márgenes, rellenos y bordes.

Ancho de una capa con todos sus atributos:

Ancho + margen izq. + margen der. + relleno izq. + relleno der. + borde izq. + borde der.

Esto es importante tomar en cuenta ya que afectará directamente al diseño de la página, habrá un desbordamiento.

HaPPy CoDiNg =)