El margen es el espacio personal de un elemento: cuánta distancia quiere mantener el elemento con otros elementos a su alrededor.
El relleno es cuánto se aleja un elemento de sí mismo: cuánta distancia quiere mantener un elemento con los elementos dentro de él.
Usar padding cuando:
No quieres que tu contenido toque los bordes del contenedor. Ejemplo: tienes varios elementos <p> dentro de un div y no quieres que el texto dentro de los elementos <p> toque el borde del div:
Quieres que el fondo del elemento se ‘toquen’ pero no los textos dentro de él. Ejemplo: tienes un div verde y uno naranja adyacentes entre sí, y quieres que ambos divs se toquen entre sí, pero NO quieres que sus textos se toquen entre sí:
Podemos ver que en la imagen hay un espacio entre los textos y sus propios bordes (padding = 10px), pero los recuadros de colores no tienen espacio entre ellos (margin = 0px)
Usar margin cuando:
Quieres tener algo de espacio alrededor de un elemento, o no quieres que el elemento toque otros elementos a su alrededor:
Podemos ver que en la imagen no hay espacio entre los textos y sus propios bordes (padding = 0px), pero los recuadros de colores SÍ tienen espacio entre ellos (margin = 15px)
Quieres centrar un elemento. Si le das “margin: auto” a un elemento con ancho fijo, centrará ese elemento horizontalmente (y también verticalmente si usa flexbox, aprende más de Flexbox aquí, aquí, o aquí):
Muy clara y agradable tu explicación, muchas gracias.