Não consegui entender bem a diferença dos valores inline e block para a propriedade display.
Entendi apenas que quando uma tag tem display block ela vai ocupar toda aquela linha.
Alguém pode explicar melhor?
Solucionado
Não consegui entender bem a diferença dos valores inline e block para a propriedade display.
Entendi apenas que quando uma tag tem display block ela vai ocupar toda aquela linha.
Alguém pode explicar melhor?
Oi Gabriel, tudo bem?
O "inline" faz com que cada linha ocupe 100% da largura da página. Cada linha de uma lista por padrão é "inline". O "block" você define qual a largura que você quer ocupar. No caso quando inserimos a imagem beneficios.jpg ela por padrão é inserida como "block" e com 100%. Como a lista estava "inline" a imagem foi para baixo da lista. Porem o designer da página quer a imagem ao lado da lista. O recurso para se conseguir isso é justamente o "inline-block" em que vc reserva dois espaços, um para a lista e outro ou lado para outro uso, no caso foi inserir uma imagem. Por essa razão a lista "ul" no CSS ficou com
ul { display: inline-block; vertical-align: top; widht: 20%; margin-right: 15%; }
e a imagem ao lado como:
.imagembeneficios { width: 50%;
Espero ter ajudado. Abraços
sergião, so corrigindo o código é ul { display: inline-block; vertical-align: top; widht 20%; margin-right: 15%; } é width do resto ta perfeito