Dúvida no Ex. 3 da Aula 9 - Nem tudo é o que parece

Vou melhorar a pergunta. Descobri que o problema foi resolvido com: .icones-redes-sociais li { display: inline-block; } .icones-redes-sociais a { width: 40px; height: 40px; display: block; text-indent: -99999px; }

mas não ficou claro como ficou a sobrescrinção do primeiro display para o segundo, mesmo que o segundo seja mais específico, a imagem e o texto estão dentro de 'a'. Na minha cabeça o texto e a imagem deveriam ser identados -99999px. Ou seja não sei pq o erro foi corrigido com esse display: block.

Bom, minha dúvida foi resolvida com o exercício seguinte kkkkkkk,

Olá Henrique tudo bem?

Então as imagens estão identando juntamente com o texto porque estamos aplicando a propriedade text-ident: -999px no li como um todo, recomendo mudar para aplicar a propriedade apenas no link como no exemplo abaixo,

HTML

      <ul class="icones">
                    <li><a href="https://github.com/" class="github">Github</a></li>
                    <li><a href="https://twitter.com/" class="twitter">Twitter</a></li>
                    <li><a href="https://br.linkedin.com"class="linkedin">Linkedin</a></li>
                </ul>

CSS

.icones li{
    display: inline-block;
}

.icones a{
    display: inline-block;
    width: 40px;
    height: 40px;
    text-indent: -9999px;
}

.github{
     background-image: url(github.png);
}

.twitter{
     background-image: url(twitter.png);
}

.linkedin{
      background-image: url(twitter.png);
}

Espero ter ajudado, bons estudos,

Atenciosamente,

Muito obrigado Renan,

Estava com o mesmo problema...