Margin e padding

(Sou um aluno, posso tentar ajudar com o que eu entendi.) os elementos tem um borda, a margin fica por fora da borda. por exemplo você faz dois quadrados brancos com uma borda preta e você quer que ele tenha um espaço do outro por exemplo 50px, você coloca o margin valendo 50px. Agora se você quer escrever um texto dentro do quadrado mas quer que o texto fique 35px da borda, você coloca o padding valendo 35px.

O padding você utiliza quando quer alterar o preenchimento interno de um elemento.

O margin você utiliza para alterar o preenchimento externo do elemento. É como se fosse um preenchimento invisível que envolve seu elemento. Você pode usa-lo para dar espaçamento entre um elemento e outro por exemplo.

Eu li um artigo que explicava sobre isso.

Para entender é preciso pensar em um container, algo como uma caixa que armazena um conteúdo, tente imaginar uma caixa de sapato com algumas caixas menores sendo acomodadas dentro dela. O conteúdo pode ser um texto ou uma imagem ou ambos.

"A propriedade margin adiciona um espaço transparente e ele não pode ser preenchido com nenhuma cor. Além disso, ela não pode receber bordas. " (Trecho do artigo)

Isso em relação ao exterior do container. Para fazer com que a caixa fique a uma certa distância de sua(s) vizinha(s).

"O padding tem um funcionamento muito similar ao do margin, porém ao invés de dar uma espaçamento externo, ele da um espaçamento interno. "

Isso m relação ao conteúdo interno ao container.

Apenas lembrando que elementos inline NÃO possuem a propriedade margin ou a propriedade padding. Apenas os elementos inblock.

Por experiência própria, recomendo utilizar a propriedade "display:flex", fica mais fácil de controlar a posição dos elementos, sem correr o risco de causar grandes distorções nos elementos mostrados na tela.

Para quem quiser treinar essa propriedade (display:flex), recomendo o jogo "flexbox frog".

Apenas lembrando que para trabalhar com ela deve-se determinar uma altura e uma largura para o container.