Então, estava com essa dúvida do porque, mesmo com o código desse jeito:
.redes 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(linkedin.png);
}
Os ícones ainda assim estavam empilhados, li esse fórum e percebi que faltava colocar isso aqui para funcionar:
.redes li {
display: inline-block;
}
Minha pergunta é: Porque eu preciso fazer isso? Se eu estou especificando que eu quero que a classe "redes" "a" receba o display inline-block, pra que eu preciso especificar que o "li" dentro do "redes" também precisa?
E porque eu não posso simplesmente usar .redes para definir isso tudo? Tipo:
.redes {
display: inline-block;
width: 40px;
height: 40px;
text-indent: -9999px;
}
Não deveria funcionar?