inline-block dentro do li

Roger, boa noite! Realizei esse curso um tempo atrás, e realmente esse tópico e essa tarefa está meio confusa. No momento não consigo te ajudar, pois não consigo nesse momento rever a aula, e ver a tarefa, mas o que você questionou tem sentido. Até amanhã vou tentar te responder. Abraço!

Roger, para você ver a diferença com mais clareza, você deve colocar uma borda em volta da tag <a> e em umas das tags <a> especificas você coloque display: block então você vai ver que a tag <a> que contem display: block estará com o campo de seleção maior e as outra terá um campo de seleção menor, podendo causar um trastorno para o usuário por ex. Se o usuário clicar no canto superior do ícone ele não irar disparar o evento pois não faz parte da área seleção da tag <a>.

Espero ter ajudado, bons estudos! ;)

Aqui no meu estava os dois com "display: inline-block;", mas ate ja mudei depois de ver o seu comentário. Não sei explicar o por que de não usar somente o display: "inline-block;" que está na "li", mas se eu tirar o "display: block;" do ".icones_sociais a" ele desconfigura todo. Acho que é necessário no "a", pois o "li" pega todos os elementos de uma forma geral e o estilo não se aplica nos ícones, pois estão separados em uma nova tag dentro do "li".

Segue meu código abaixo:

.icones_sociais li {
    display: inline-block;
}

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

Espero ter ajudado, sou bem novo no assunto.

Pessoal, obrigado pelo feedback.

O que me confundiu foi a questão hierárquica do código. Uma vez que a tag a está dentro da tag li, fui induzido a pensar que tudo que se aplica a tag li também se aplicará para o que estiver dentro dela, com a tag a fazendo parte disso.

O que sei até então é que há tags que são blocos, por exemplo, a tag aside, e há tags que são linhas. Porém algo me falta para solucionar a minha dúvida.