Espaçamento interno e externo | HTML5 e CSS3 parte 1: crie uma página da Web

Espaçamento interno e externo

Cara também estou aprendendo sobre isso. Mas penso o seguinte o "Margin" que é nosso espaçamento externo serve para separar de outro conteúdo ou outra "caixa" Já o padding alinha os elementos dentro da nossa caixa. Acho que vai um pouco de persistência para entender bem. Fiz esse dois códigos que serve para você dar uma olhada e tentar entender.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div id="margin">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod labore sed
        ipsa velit voluptates id magni aliquam, laborum eum iure assumenda
        repudiandae reiciendis molestiae illo saepe ad officiis, quisquam ab.
      </p>
    </div>
    <div id="margin2">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto hic
        consequatur unde in qui minima recusandae explicabo eos voluptas velit
        quam natus minus, suscipit accusantium laudantium culpa a eveniet
        officiis.
      </p>
    </div>
  </body>
</html>

código css

body {
  width: 400px;
}
#margin {
  border: 1px solid red;
  padding: 10px;
}
#margin2 {
  border: 1px solid blue;
  margin: 10px;
}

cópia e coloca no seu editor e vai alterando a margin e o padding para ver os resultados.