Las preguntas que involucran a padding y margin siguen siendo las más comunes porque hay una tendencia a suponer que son lo mismo y eso, en realidad no es cierto.
Si muestro este ejemplo, uno diría ... es lo mismo porque parecen lo mismo. En ambos casos, en una etiqueta cualquiera, hay otra, un párrafo sencillo. El de la izquierda tiene establecido un margen, el de la derecha, un padding; en ambos casos, el valor es 20:
<p style="margin: 20px; padding: 0;">un ejemplo</p>
<p style="margin: 0; padding: 20px;">un ejemplo</p>
Para ver que no son lo mismo, a esas mismas etiquetas les agregaremos algo más, por ejemplo, un color de fondo:
Como se ve ahora, la diferencia es notable; lo mismo ocurriría si le pusiera un borde, etc.
La clave de todo, es entender que una etiqueta es un rectángulo que tiene un cierto tamaño. Ese tamaño, está dado por sus dimensiones si es que las hemos establecido con height y width o bien por su contenido; es decir una etiqueta es un rectángulo que tiene un tamaño igual a su contenido, sea este una imagen o un texto.
Con margin, separamos ese rectángulo de aquellos otros rectángulos que lo contienen o que son adyacentes pero, el rectángulo en si mismo no varía, sigue midiendo lo mismo.
Por el contrario, padding aumenta el tamaño de ese rectángulo, crea espacios alrededor de este y por eso, cuando le ponemos un fondo en el ejemplo de la derecha, ese color abarca un rectángulo mayor.
margin es un valor hacia afuera y padding es un valor hacia adentro
Esa es la razón por la que podemos usar márgenes negativos para desplazar algo hacia arriba o hacia la izquierda pero, no podemos usar paddings negativos.
En todos los navegadores, esto se verá como un rectangulo de 500 pixeles de ancho:
<div style="background-color:#FFF;margin:0 auto;width:500px;"></div>
Morbi porttitor sodales enim non lacinia. Aliquam bibendum eros vitae nisi egestas eget accumsan metus ullamcorper. Fusce vel laoreet erat. Integer ut ante enim, convallis vehicula nisi. Pellentesque ut libero nec quam faucibus scelerisque.
Y si le agrego un borde de 10 pixeles, el rectángulo será mayor y medirá 520 pixeles de ancho:
<div style="background-color:#FFF;border:10px solid #6495ED;margin:0 auto;width:500px;"></div>
Morbi porttitor sodales enim non lacinia. Aliquam bibendum eros vitae nisi egestas eget accumsan metus ullamcorper. Fusce vel laoreet erat. Integer ut ante enim, convallis vehicula nisi. Pellentesque ut libero nec quam faucibus scelerisque.
Y si le agrego un padding de 20 pixeles, el rectángulo será aun mayor y medirá 560 pixeles:
<div style="background-color:#FFF;border:10px solid #6495ED;margin:0 auto;padding:20px;width:500px;"></div>
Morbi porttitor sodales enim non lacinia. Aliquam bibendum eros vitae nisi egestas eget accumsan metus ullamcorper. Fusce vel laoreet erat. Integer ut ante enim, convallis vehicula nisi. Pellentesque ut libero nec quam faucibus scelerisque.
La regla de oro es esta:
ancho = border-left + padding-left + width + padding-right + border-right
alto = border-top + padding-top + height + padding-botom + border-botom
Pero el oro es uno de esos materiales impredescibles y esa regla es ... relativa ya que hay otra propiedad que la modifica de manera sustancial y es una regla que funciona en cualquier navegador moderno, incluyendo Internet Explorer 8.
Sabemos que las propiedades CSS tienen siempre un valor por defecto así que si no las colocamos, los navegadores usan esas definiciones. La gran mayoría de ellas, sobre todo las más sofisticadas, no influyen en nada, son siempre valores nulos o no nos damos cuenta de su existencia. Este es el caso de la propiedad box-sizing que tiene tres formas de sintaxis:
-moz-box-sizing: valor; en Firefox
-webkit-box-sizing: valor; en Chrome y Safari
box-sizing: valor; en IE 8 y Opera
El valor por defecto es una palabra: content-box que indica que el ancho y alto de algo no incluye bordes, paddings ni márgenes, sólo su contenido. Pero admite otro valor: border-box que establece que el ancho y alto incluyen al borde y al padding.
Dijimos que si esto mide 500 y le ponemos un borde de 10 pixeles, el rectángulo será de 520 pixeles:
Morbi porttitor sodales enim non lacinia. Aliquam bibendum eros vitae nisi egestas eget accumsan metus ullamcorper. Fusce vel laoreet erat. Integer ut ante enim, convallis vehicula nisi. Pellentesque ut libero nec quam faucibus scelerisque.
Morbi porttitor sodales enim non lacinia. Aliquam bibendum eros vitae nisi egestas eget accumsan metus ullamcorper. Fusce vel laoreet erat. Integer ut ante enim, convallis vehicula nisi. Pellentesque ut libero nec quam faucibus scelerisque.
Así que ahora le agregaremos la propiedad box-sizing con el valor border-box y el rectángulo tendrá los 500 pixeles que indica width; el borde será "interior":
Morbi porttitor sodales enim non lacinia. Aliquam bibendum eros vitae nisi egestas eget accumsan metus ullamcorper. Fusce vel laoreet erat. Integer ut ante enim, convallis vehicula nisi. Pellentesque ut libero nec quam faucibus scelerisque.
Este detalle es particularmente útil cuando lo que hacemos es utilizar medidas como porcentajes ya que estos porcentajes no incluyen los bordes.
<div style="padding: 10px; margin:0 auto; width: 500px;">
<div style="margin:0 auto; width:100%;">
....... el contenido .......
</div>
</div>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In mattis; urna in lobortis ultricies, eros risus mattis leo.
Fíjense qué pasa si le agrego un borde:
<div style="padding: 10px; margin:0 auto; width: 500px;">
<div style="border: 10px solid #6495ED; margin:0 auto; width:100%;">
....... el contenido .......
</div>
</div>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In mattis; urna in lobortis ultricies, eros risus mattis leo.
Peor aún si le agrego un padding:
<div style="padding: 10px; margin:0 auto; width: 500px;">
<div style="border: 10px solid #6495ED; margin:0 auto; padding: 10px; width:100%;">
....... el contenido .......
</div>
</div>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In mattis; urna in lobortis ultricies, eros risus mattis leo.
Todo se soluciona si establezco la propiedad box-sizing con el valor border-box:
<div style="padding: 10px; margin:0 auto; width: 500px;">
<div style="border: 10px solid #6495ED; box-sizing: border-box; margin:0 auto; padding: 10px; width:100%;">
....... el contenido .......
</div>
</div>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In mattis; urna in lobortis ultricies, eros risus mattis leo.