Alteração das medidas com relação a medida da fonte

Boa noite, Willy! Como vai?

O font-size padrão nos navegadores normalmente é de 16px! Sendo assim, se esse padrão foi mantido no CSS durante o curso, 1em equivale a 16px! Portanto, imagino que tenha sido essa razão entre os valores que o instrutor utilizou para estipular .5em para o padding que, nesse caso, equivaleria a 8px e 1em para o margin que equivaleria a 16px! Exatamente os valores que estavam estipulados anteriormente!

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Olá Willy, tudo bem? A medida EM se calcula pelo pai do elemento, diferente do REM que é sempre pelo body ou html. Por exemplo:

<div class='caixa-um'>
</div>
<div class='caixa-dois'>
    <p>Lorem</p>
</div>

.caixa-um{
    font-size: 20px;
}

.caixa-dois{
    font-size: 25px; //O elemento p vai se referir a ele, seu pai.
}

Espero ter ajudado.

Fala aí Willy, tudo bem? Bom, vamos lá:

no entanto ao definir para 1.5 seria em relação ao que?

Se você estiver usando em o 1.5 será calculado relacionado ao tamanho do font-size do elemento pai, ou seja, o tamanho da fonte será 1.5 x TAMANHO_DA_FONTE_PAI.

Se a gente tiver um elemento pai com 16px, será: 1.5 x 16, resultando em: 24px.

Além disso como ele converteu as outras medidas de 8px e 16px para .5em e 1em respectivamente , como chegou nesse resultado?

Aqui ele vez uma divisão da quantidade de px por 16:

8 / 16 => 0.5
8px / 16px => .5em

O mesmo vale para o 16px que resultou 1em.

Isso, porque por padrão, cada 1em são equivalente á 16px, por isso foi feita a divisão por 16.

Espero ter ajudado.

Matheus, tb tive a mesma dúvida acima em relação as conversões pq o enunciado diz :"considerando que o código havia sido desenvolvido com base num tamanho de fonte de 20 pixels:". Nesse caso, o correto seria considerar: 8/ 20 =.4rem e 16/20 =.8rem ?

Exatamente Lais.

Abraços