Las definiciones margin-padding

Este es uno de los temas más peliagudos de los códigos.
Margin, en teoría, es la distancia entre elementos.
Padding, en teoría, es la distancia de un contenido al borde de su contenedor.

Y digo "en teoría" porqué por alguna extraña razón a veces, en algunas plantillas, eso no es exacto, aunque habitualmente si que funciona.
¿Que os parece si lo vemos en imágenes?

Este es el código del footer, o pie del blog, del blog de muestras de bordes.

La plantilla base es una scribe.

Como puedes ver he subrayado las medidas que tiene.

En #foooter están las distancias que ocupa el elemento en el blog.

margin-top define la distancia del footer a lo que tiene encima.

padding-top define la distancia de su contenido a su borde superior.

En el código que le añadí para definir el estilo de los elementos que contiene el footer, el trocito del final, también puedes ver un margin y un padding, en este caso totales.

Y aquí puedes ver el aspecto que tiene esta zona y su elemento en el blog y notar la distancia entre el footer, (enmarcado en morado) y la zona de las entradas, (enmarcadas en rojo) y la que hay entre el widget o elemento, (enmarcado en gris-azulado) y el borde del footer.

Como ves la distancia de elemento al borde superior en este caso es mayor, ya que a los 10 pixels de margen del widget se le suman los 10 del padding-top del footer.

Ahora aumentaré el margin-top del footer hasta los 50 píxels.
Y así es como se ve.



Fíjate en como ha aumentado la distancia que separa el footer del main (la zona de las entradas)
Sin embargo el contenido del footer no ha variado sus distancias.

Ahora voy a cambiar el padding-top de footer y ponerlo en 50. (De paso el margin lo devuelvo a sus 10 pixels o no cabrá la imagen aquí).

Como puedes ver, el elemento se ha ido hacia abajo, aunque mantiene sus distancias en los otros tres lados.

He puesto una distancia grande para que pueda apreciarse la diferencia.

Ahora volveré a dejarlo como estaba y pasaré a modificar las distancias a través de las órdenes que hay en .footer .widget

Empezaré por modificar el margin y lo pondré en 50 píxels.

Y como ves todo el elemento se ha separado de los bordes de su contenedor.

Pero aquí hay que tener en cuenta una cosa: Estas imágenes las estoy capturando desde el Explorer; ¿se verá igual en Firefox?. Vamos a verlo.
Bueno, menos mal. Se ve igual. (No os pongo las imágenes por no repetir inencesariamente).

Y para terminar, volvamos las cosas a sus medidas pervias y vamos a probar qué sucede si variamos el padding del widget.
Pues aquí lo teneis.

Como podeis comprobar, la distancia del widget al borde del footer no ha variado de la inicial de 10 píxels, pero la distancia del contenido del elemento si ha variado a los bordes.

Una aclaración:
Este elemento contiene una imagen que ya de por si es mucho más pequeña que el ancho del elemento, con lo que la distancia a los bordes laterales no se aprecia.

Con eso quiero indicar una cosa:
Si enmarcais los elementos, aunque no enmarqueis su contenedor, (ya sea el footer, la sidebar o el main, que es el contenedor de las entradas), vereis que el contenido de los elementos queda muy pegado a los bordes laterales de éste.
Añadiendo la orden padding-left: 4px; (por ejemplo, podeis separalo más aumentando el número), o padding-$startSide: 4px; podeis hacer que se separen un poco del borde y tenga un aspecto más adecuado.

Y para terminar aquí os dejo un juguete para que os entretengais un poco.

J.Miur de Vagabundia lo tiene colocado en su entrada Margin Vs. Padding, en la que explica estas cosas muchísimo mejor y con mayor conocimiento del tema, que yo.

Le pedí que me lo prestara y tuvo la amabilidad de enviarme el código para que pudiera añadirlo a esta entrada.

Con él podeis jugar a probar las diferencias entre margins y paddings. Poneis la medida que querais en cada casilla que tiene un cero y vais pinchando en los botones.

Bloque EXTERNO		Bloque INTERNO

CONTENIDO CONTENIDO CONTENIDO