Margin
La propiedad margin se utiliza para establecer la anchura de algunos o todos los márgenes de los elementos. Esto es la distancia que separa nuestra capa respecto a su contenedor.

Los valores para margin se pueden definir de muy distintas formas como podemos ver a continuación y además puede adquirir valores negativos:

• margin-top, margin-left, margin-right, margin-bottom
  Estos no son propiamente valores para la propiedad margin, sino que se trata de diferentes tipos de propiedades definidas individualmente. Cada uno de esto márgenes definiría individualmente el espacio vertical (superior o inferior) u horizontal (izquierdo o derecho)  del bloque.

  La sintaxis sería del tipo: #capa{ margin-top:10px;}

• margin:10px;
  Formato abreviado. Si sólo de especifica un valor, este se aplica a los cuatro lado de forma que nos permite definir el margen de los cuatro costados en una misma instrucción. Realizaría lo mismo que definiendo individualmente cada uno de los margenes con el mismo valor:

  margin-top:10px;
  margin-left:10px;
  margin-right:10px;
  margin-bottom:10px;

• margin:10px 5px;
  Formato abreviado. Si se especifican dos valores, el primero se aplica a los márgenes superior e inferior y el segundo a los márgenes derecho e izquierdo ,así nos permite definir los valores verticales y los horizontales separadamente. Sería igual que definirlo de la siguiente manera:

  margin-top:10px;
  margin-left:5px;
  margin-right:5px;
  margin-bottom:10px;

• margin:10px 5px 8px;
  Formato abreviado. Si se especifican tres valores, el primero se aplica al margen superior, el segundo a los márgenes derecho e izquierdo y el tercero al margen inferior. Sería igual que definirlo de la siguiente manera:

  margin-top:10px;
  margin-left:5px;
  margin-right:5px;
  margin-bottom:8px;

• margin:10px 5px 8px 12px;
  Formato abreviado. Al especificar los cuatro valores nos referimos a los 4 márgenes posibles siguiendo el orden de arriba, derecha, abajo e izquierda o, para recordarlo mejor, siguiendo las agujas del reloj. Sería igual que definirlo de la siguiente manera:

  margin-top:10px;
  margin-left:5px;
  margin-right:8px;
  margin-bottom:12px;

Padding
La propiedad padding puede entenderse como “relleno” o margen interior  y sería la distancia que va desde el contenido de nuestra caja hasta el borde de la misma.

Los valores para el padding funcionan exactamente igual que los de margin pero con los márgenes interiores:

• padding-top, padding-left, padding-right, padding-bottom
  Diferentes tipos de propiedades definidas individualmente. Cada uno de esto márgenes definiría individualmente el espacio vertical (superior o inferior) u horizontal (izquierdo o derecho) interior de nuestra capa.

  La sintaxis sería del tipo: #capa{ padding-top:10px;}

• padding:10px;
  Formato abreviado. Si sólo de especifica un valor, este se aplica a los cuatro lados de forma que nos permite definir el margen interior de los cuatro costados en una misma instrucción. Realizaría lo mismo que definiendo individualmente cada uno de los márgenes con el mismo valor:

  padding-top:10px;
  padding-left:10px;
  padding-right:10px;
  padding-bottom:10px;

• padding:10px 5px;
  Formato abreviado. Si se especifican dos valores, el primero se aplica a los márgenes interiores superior e inferior y el segundo a los márgenes interiores derecho e izquierdo ,así nos permite definir los valores verticales y los horizontales separadamente. Sería igual que definirlo de la siguiente manera:

  padding-top:10px;
  padding-left:5px;
  padding-right:5px;
  padding-bottom:10px;

• padding:10px 5px 8px;
  Formato abreviado. Si se especifican tres valores, el primero se aplica al margen interior superior, el segundo a los márgenes interiores derecho e izquierdo y el tercero al margen interior inferior. Sería igual que definirlo de la siguiente manera:

  padding-top:10px;
  padding-left:5px;
  padding-right:5px;
  padding-bottom:8px;

• padding:10px 5px 8px 12px;
  Formato abreviado. Al especificar los cuatro valores nos referimos a los 4 márgenes interiores posibles siguiendo el orden de arriba, derecha, abajo e izquierda. Como en el caso de margin, siguiendo las agujas del reloj:

  padding-top:10px;
  padding-left:5px;
  padding-right:8px;
  padding-bottom:12px;

En muchas ocasiones, debido a la similitud,  se suele confundir el padding con el margin pues ambos permiten definir las distancias entre los margenes de una caja, pero hay que recordar que margin define la distancia desde el exterior al borde de la caja y padding la distancia desde el borde de la caja hasta el contenido interior de la misma.

Es importante destacar que los valores del padding influyen en el tamaño final en alto o ancho de nuestra capa.

Para el siguiente ejemplo:
#capa{width:260px; height:140px; padding:10px;}

El ancho total de nuestra capa será de 280px, pues tenemos un ancho de 260px al que le sumamos 10px de margen interior a izquierda y derecha, mientras que el alto será de 160px pues le sumamos el margin interior superior e inferior de 10px.