Não ficou claro para mim o conceito do inline e block. Pq foi usado os dois? Pq não utilizou somente um deles?
Fico no aguardo de quem puder dar uma explicação mais detalhes.
Obrigado
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Não ficou claro para mim o conceito do inline e block. Pq foi usado os dois? Pq não utilizou somente um deles?
Fico no aguardo de quem puder dar uma explicação mais detalhes.
Obrigado
Olá, Jullyan.
Tudo bem?
O display: block; faz com que uma tag ocupa a largura inteira da página, ou seja, mesmo que o item não ocupa a largura total da página, ele bloqueia e não deixa nada ao lado, ele bloqueia o conteúdo daquela linha. Todos os itens da lista têm o comportamento block. Já uma imagem não bloqueia o conteúdo, ela deixa que existam outros na lateral, e esse tipo de comportamento é chamado de display: inline;
A diferença entre eles é que mesmo que diminua o tamanho, diminua a largura de um elemento display: block;, ele vai sempre ocupar aquela linha, mesmo preenchendo só metade e o resto invisível.
Um elemento display: inline; não me deixa alterar, por exemplo, o espaçamento externo e interno dele, porém deixa colocar algo ao lado na lateral. O display: inline-block; é a junção dos dois.
Quando o elemento possui as duas condições. Ele é inline e block ao mesmo tempo. Ou seja, ele bloqueia uma largura, mas essa largura é fixa. Sou eu que dou o tamanho. E ele me deixa também mexer na largura e nos espaçamentos interno e externo e deixa colocar algo do lado na lateral.
Espero ter ajudado.
Qualquer dúvida manda aqui :)