HTML E CSS

Um pouquinho de posicionamento
Ainda estão faltando os ícones que servirão de links para os nossos perfis nas redes sociais.
Podemos representar esses ícones como uma lista de links dentro do nosso <aside>. Dentro de cada tag <a>, podemos colocar, em vez de texto, a imagem com o logotipo da rede social:
<ul>
<li>
<a href="https://github.com/joao">
<img src="github.png" alt="Github">
</a>
</li>
<li>
<a href="https://twitter.com/joao">
<img src="twitter.png" alt="Twitter">
</a>
</li>
<li>
<a href="https://br.linkedin.com/pub/joao">
<img src="linkedin.png" alt="LinkedIn">
</a>
</li>
</ul>
Isso já nos dá um resultado próximo do esperado: as imagens aparecem, são clicáveis, mas ainda estão uma em cima da outra. Por que isso acontece e como resolver isso?

Se olharmos nosso layout atual e compararmos com o nosso HTML, veremos que, de modo geral, as tags que criamos –
<p>, <header>, <aside>, <footer> – ficam uma embaixo da outra. Ou seja, esse é o comportamento padrão do navegador: empilhar as tags como caixas, uma em cima da outra.

Mas nem toda tag tem esse comportamento. Repare, por exemplo, nas tags <a>, <strong> e <em>. Elas ficam no meio do texto, não empilhadas.

Então, na verdade, temos esses dois comportamentos possíveis: empilhar ou ficar no meio do texto. Ou, em outras palavras, temos tags que são block, que empilham, e tags que são inline, que ficam no meio do texto.
No caso da nossa lista de ícones, as tags <li> têm o comportamento de empilhar, são block, por isso os ícones aparecem um abaixo do outro. Se as removermos, deixando apenas os links com as imagens, conseguiremos o resultado desejado.
Mas será que faz sentido mexer no HTML por uma questão visual? Faz sentido alterar a semântica da nossa página por isso? Como é uma questão visual, devemos resolver usando a linguagem responsável por esse aspecto da nossa página: a linguagem CSS. No CSS, conseguimos controlar esse aspecto de um elemento por meio da propriedade display. Se quisermos fazer com que os