Si bien puede llevar a ciertas confusiones, sobretodo en los diseñadores mas nuevos, el padding y el margin difieren entre si, aunque es una sutil diferencia. A pesar de esta diferencia, en ocasiones y dependiendo del diseño especifico, ambos terminan cumpliendo con las mismas funciones.
El margin se refiere a la distancia (o margen) entre una capa y otra. Para verlo de una manera mas facil, es la distancia hacia afuera de la capa.
Tiene dos formas de utilizacion, una puede ser del tipo individual
.div {
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;}
De esta manera podemos, visualamente, ver rapidamente cual es el margen con el resto de las capas.
La otra forma, es una forma resumida o grupal y se declara de la siguiente forma:
.div {
margin: 20px 15px 10px 5px;
}
Cuando se utiliza de esa manera, la forma de leerlo es: margin-top(20px) margin-right(15px) margin-bottom(10px) margin-left(5px)
(Entre parentesis puse los valores para que se entienda mejor) Recuerden que siempre se empieza desde arriba y se va siguiendo la ruta de las manesillas del reloj.
En cuanto al padding, es la distancia desde el borde de la capa hasta los limites del contenido, yendo hacia adentro, en pocas palabras es algo asi como la sangria de los parrafos en un texto.
Tal y como con el margin, existen dos formas de declar el padding,
tipo individual
.div {
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;}
Forma resumida
.div {
padding: 20px 15px 10px 5px;
}
La forma de leer la forma resumida es exactamente igual al margin, se empieza desde arriba y en sentido horario.
Creo que se entienden las diferencias entre ambos, la imagen supongo que ayudara mas que las palabras.
Cualquier duda, dejen un comentario.
Saludos