Margin Vs Padding && Medidas relativas

Olá pessoal, fiquei um bom tempo parado com os estudos aqui no site e estou voltando agora, essa primeira duvida provavelmente é algo bem básico e visto no primeiro curso, mas não estou conseguindo ver a diferença, lá vai ela: [Referente ao desenvolvimento da pagina Index]

Meu código:

padding vs margin:
.saudacao p {
    margin: 4rem;
    color: #99A;
    line-height: 1;
}

Código da resposta:

.saudacao p {
    font-size: 1.5em;
    color: #99A;
    line-height: 1;
    padding: 2em;
}

Os dois resultam no mesmo visual, porém para mim, com oque eu tento puxar da memória, o margin seria mais adequado pelo fato de que o espaço entre os outros elementos não faz parte do texto.

Agora a duvida do tópico é em relação as medidas relativas, oque eu fiz foi o seguinte: [resumidamente eu só usei rem, oque provavelmente não é bom, mas eu tinha mais noção do que eu estava fazendo assim]

html{
    font-size: 1.2rem;
}
.foto-home {
    height: 200px;
}
.saudacao p {
    margin: 4rem;
    color: #99A;
    line-height: 1;
}
.saudacao-inicio {
    font-size: 4rem;
    color: #889;
}
.saudacao-ultima-linha {
    text-align: right;
    display: block;
}
.saudacao strong {
    color: #000;
    font-size: 3rem;
}
.saudacao em {
    color: #851944;
    font-size: 5rem;
}
.botao-index {
    background-color: #851944;
    color: #FFF;
    border: .2em solid black;
    width: 20rem;
    display: block;
    text-align: center;
    padding: .5rem 0;
    margin: 3rem auto;
}
.secao-inicio, footer{
    padding: 2.5rem 2rem;
}
.secao-inicio h2, footer h2 {
    text-transform: uppercase;
    font-size: 2.5rem;
}
.trabalhos{
    background-color: #3C1D3D;
    border-top: .5rem solid #000;
    border-bottom: .5rem solid #000;
}
.trabalhos h2 {
    color: #FFF;
}
.trabalhos ul {
    box-sizing: border-box;
    margin: 0 auto;
    overflow: hidden;
    border: .5rem solid black;
}
.trabalhos li {

    float: left;
    width: 33.333%;
}
.trabalhos img {
    width: 100%;
    display: block;
}
.blog {
    background-color: #999;
    color: #FFF;
    border-bottom: 10px solid #851944;
}
.blog li a {
    color: #FCF;
}
footer {
    background-color: #000;
    color: #FFF;
}
footer a {
    color: #F99;
}
main {
    width: 100%;
    padding-bottom: 0;
    float: none;
}

Olá Daniel, bem sobre Margin vs Padding as vezes o resultado pode parecer o mesmo... mas imagine a seguinte situação:

div{ width: 100px; height:100px; margin:10px; }

O espaço que essa div ocupara na tela será de 120px por 120px, pois a margin gera espaçamento dos cantos dos elementos para fora;

div{ width: 100px; height:100px; padding:10px; }

Já no caso do padding, a div continuaria ocupando 100px por 100px, porém o espaço interno dela diminuiria para 80px por 80px, pois o padding "se apropria" do espaço dentro do elemento.

Em certas situações quando você tem algo parecido com:

<body>
        <div class="article"></div>
</body>

Se você determinar que article tem 100% de largura e colocar uma margin nela pensando em ter uma área de respiro em seu conteúdo, com certeza ela explodirá a largura do seu navegador e aparecerá uma barra de rolagem horizontal. Nessa situação seria mais interessante usar um padding, pois ele manteria os 100% de largura e você determinaria o quanto seria a área de respiro, mantendo assim uma navegação sem incômodos.

Em geral seria mais ou menos essa a diferença, agora sobre o uso das medidas relativas, no início sempre tinha uma "colinha" sobre esse tipo de coisa, é funcional mas não vale a pena você trabalhar apenas com uma medida, tendo em vista o grande crescimento da web e a mesma sendo utilizada por diversos tipos de pessoas, inclusive com ausência total ou parcial da visão.

Boa sorte pra ti, se cuida!