Solucionado
No projeto Alura-Books, a imagem Email.css ficou assim:
Resolvi o problema acrescentando background-position no código abaixo:
.contato__email::placeholder {
font-family: var(--fonte-principal);
color: var(--azul);
background: url("../img/Email.svg") no-repeat;
background-position: left center;
padding-left: 2em;
}
Ficando assim:
Isso ocorre porque a imagem Email.css exportada do Figma tem uma base-line no top?
Olá João! Tudo bem?
Quando você exporta uma imagem do Figma, ela pode ter margens ou espaçamentos que afetam como ela é exibida no seu projeto. Usar background-position: left center; ajuda a centralizar a imagem verticalmente, corrigindo o alinhamento.
Provavelmente a imagem tem uma "base-line" ou algum espaço extra no topo, o que faz com que ela não fique centralizada por padrão. Ajustar o background-position é uma boa solução para garantir que a imagem fique alinhada corretamente.
Se precisar de mais ajustes, você pode experimentar com valores diferentes de background-position ou até mesmo ajustar a imagem no Figma antes de exportá-la.
Conte com o apoio do fórum em sua jornada :)
Um abraço e bons estudos!
Obrigado pela ajuda :)