¿Cuándo usar padding y margin?

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)

• Quieres aumentar el tamaño de un elemento. Ejemplo: si quieres aumentar el tamaño de un botón:
  

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í):