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

Nesse exercício ele quer saber se pode substituir o display: inline-block pelo display: block utilizado na tag <a>, e nesse caso sim, ele pode ser substituido. A diferença entre eles é que block define que o elemento seja como um bloco, ou seja, nada vai ao lado dele.

Já o display: inline-block define que os elementos sejam colocados lado a lado e se não for alterado a largura e altura, o elemento irá ocupar o espaço necessário para exibir seu conteúdo.

No exercício não faz diferença colocar um ou outro porque display é usado na tag <a> apenas para ajustar altura e largura do elemento.

Já nas tags <li> é utilizado display: inline-block para que os <li> sejam exibidos um ao lado do outro, e como as tags <a> estão dentro de <li> elas serã exibidas lado a lado. Se fosse utilizado display: block nas tags <li> elas seriam exibidas uma embaixo da outra.

<ul class="links-redes-sociais">
    <li>
        <a class="github" href="https://github.com/joaodasilva">GitHub</a>
    </li>
    <li>
        <a class="twitter" href="https://twitter.com/joaodasilva">Twitter</a>
    </li>
    <li>
        <a class="linkedin" href="https://br.linkedin.com/pub/joão-da-silva/32/4/508">Linkedin</a>
    </li>
</ul>

A formatação do exemplo não saiu como eu esperava... rrsssss

Só para exemplificar

<div style="background-color: red; display: block;">
    display: block
</div>
<div style="background-color: orange; display: block;">
    display: block
</div>

<div style="background-color: red; display: inline-block;">
    display: inline-block
</div>
<div style="background-color: orange; display: inline-block;">
    display: inline-block
</div>

Valeu amigooo!

Eu estou quebrando a cabeça nessa... se a tag a é mais específica do que a tag li, pois a fica dentro do li, como o display: block que é aplicado no a não sobrescreve o display: inline-block do li?

Oi Isabel, tudo bem?

O display pega só o elemento que você está de fato selecionando, ele não vai "subindo".