Oi João, tudo bem?
Desculpe a demora em retornar.
Entendi sua dúvida sobre o uso do calc para resolver um problema de padding e margin no vídeo do capítulo Estilização das Receitas do curso Arquitetura CSS: descomplicando os problemas.
Primeiramente, é importante entender que o padding é o espaçamento interno de um elemento e o margin é o espaçamento externo. No exemplo dado, o elemento "RECEITAS" tem um padding de 5rem para cima e para a esquerda, enquanto o filho "RECEITA" tem uma margem de 5rem para baixo e para a direita.
A questão é que, como o elemento "RECEITA" está dentro do elemento "RECEITAS", a margem de 5rem para a direita não se aplica somente ao próprio elemento "RECEITA", mas também afeta o espaçamento do elemento "RECEITAS". Isso significa que, sem o uso do calc, o elemento "RECEITAS" estaria a 10rem de distância da borda direita da tela (5rem de padding interno + 5rem de margem externa do filho "RECEITA").
Para resolver esse problema, é possível utilizar o calc para subtrair a margem externa do filho do espaçamento interno do pai. Ou seja, em vez de utilizar uma margem de 5rem para a direita no filho "RECEITA", podemos utilizar uma margem de calc(5rem - 5rem), o que resultará em uma margem de 0 para a direita. Dessa forma, o espaçamento interno do elemento "RECEITAS" permanecerá em 5rem e a margem externa do filho "RECEITA" não afetará o espaçamento do pai.
Segue um exemplo de código para ilustrar essa solução:
.receitas {
padding: 5rem 5rem 0 0;
}
.receita {
margin: 5rem 0 0 calc(5rem - 5rem);
}
Espero que tenha ficado claro como o uso do calc pode ser útil para resolver problemas de espaçamento em CSS. Se tiver mais alguma dúvida, é só perguntar. Bons estudos!
Espero que tenha te ajudado, bons estudos!
