Margin x Padding

Quando comecei a aprender CSS e aprendi as propriedades de espaçamento que são margin e padding, sempre me perguntava quando usar uma e quando usar outra, não era concreto na minha mente o momento certo para usar uma ou outra, então fui fazendo de qualquer jeito, até descobrir que existem diferenças entre elas e o momento certo para usa-las.

Qual a diferença entre Margin e Padding?

• Margin: é o espaço em volta do componente, distancia que o elemento tem para outro elemento em volta dele.

  Exemplo do margin afastando o elemento:
  

  GIF

• Padding: é o espaço dentro do próprio componente, quanto de distancia o elemento tem pra dentro dele mesmo.

  Exemplo: Como se você colocasse um casaco que lhe desse mais volume, essa distancia do casaco até sua pele é o padding.
  

  GIF

Quando usar um ou outro?

• Se usa Margin quando:

  1. Quando se quer dar espaço entre elementos que estão em volta dele.
  2. Para centralizar o componente, afinal com margin auto e width definido o componente vai ficar ao meio tanto horizontalmente quanto verticalmente.

• Se usa Padding quando:

  1. Quando não se quer que os elementos não toquem a borda
  2. Quando se quer crescer o tamanho de um componente

---

Na minha visão esses são algumas diferenças entre usar margin e usar padding, também quando usar um ou outro, espero ter ajudado com esse conteúdo, comenta se você tem visões diferente da minha e se gostou desse pequeno post.

Obrigado!

Stay hard every day!

Ass: Italo Canturil