Solucionado
Mas no caso da imagem e lista, deixar tudo como inline já não bastaria? Por que que, ao tentar isso, a imagem ainda não fica do lado da Lista?
Oi, Arthur, tudo bem?
A grande diferença entre o display: inline e o display: inline-block é que o segundo, exibe um elemento como um contêiner de bloco em nível de linha, por isso a lista se alinha à foto; e que você também pode mudar os valores de altura e largura.
Já o inline somente exibe um elemento como um elemento embutido, mas não alinha os demais à ele como o `inline-block, além de você não poder mudar os valores de largura e altura.
Se ficou qualquer dúvida é só falar :}
Desculpe-me, porém não sei o que é contêiner de bloco ou elemento embutido.
Olá Arthur, estou aprendendo como você :)
Mas o contêiner que a Laís fala, é como se pegássemos vários bloquinhos e colocássemos dentro de uma caixa, um do lado do outro.
Imagina que você tem que dá um presente para seu amigo, você escolheu dá um relógio (block) e uma camisa (block), certo? Ai você pega sua melhor caixa de presentes (contêiner), e coloca a camisa ao lado do relógio, dentro dessa caixa. (eles ficam "inline")
Você pode escolher a distancia que os "blocks" vão ficar da parede da sua caixa de presente (padding), você pode dobrar a camisa para caber melhor (width). Assim funciona o display: inline-block. São elementos (blocks), dentro de um mesmo "contêiner" (uma caixa grande), ordenados na mesma linha (inline), que te permite aumentar ou diminuir os espaçamentos ou largura, dentro do mesmo espaço. Um respeitando o espaço do outro.
Já o "elemento embutido", é como se dentro dessa caixa de presente não tivesse uma ordem. Você não teria controle sobre o que vai ficar onde. Não conseguiria deixar a camisa mais dobrada para que o relógio fique ao lado dela, por exemplo. Ou seja, não teria controle nas dimensões destes elementos.
Espero ter ajudado ;)
Ajudou sim. Aliás, as 3 afirmações que eu fiz no início do tópico estão corretas?