Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Comportamento correto do nav

Esse é o codigo da questao:

<header>
    <img src="logo.png" alt="Minha empresa">
    <nav>
        <ul>
            <li><a href="/sobre">Sobre</a></li>
            <li><a href="/produtos">Produtos</a></li>
            <li><a href="/consultoria">Consultoria</a></li>
            <li><a href="/contato">Contato</a></li>
        </ul>
    </nav>
</header>

Minha pergunta é: Porque se eu usar inline tanto na tag nav como na tag img, eles renderizam em linhas diferentes? Mas quando uso o inline-block, as tags sao renderizadas lado a lado?

2 respostas
solução!

Alexandre, muito bem colocada, a sua dúvida. Quando você coloca inline, os elementos não aceitam largura (width), nem altura (height), o tamanho do elemento é definido pelo conteúdo que ele contém. O inline atribui aos elementos o comportamento de uma palavra. Já o display block define que os elementos terão o comportamento de um bloco ocupando uma área da página. O inline-block é a fusão dos dois.

Se quiser ir mais a fundo \o/

Esse post pode ti ajudar com o display inline: https://medium.com/collabcode/pare-de-chutar-e-aprenda-como-funciona-o-display-inline-4ccb7b77371d

e aqui o inline-block: https://medium.com/collabcode/pare-de-chutar-e-aprenda-como-funciona-o-display-inline-block-4e6cba2f19d4

Espero ter ajudado

Muito boa explicação, me ajudou bastante a entender o inline, obrigado.