Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

dúvida

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Melhorando o CSS e atividade Pseudo-classes

por WELLITON MARTINS DOS SANTOS
| 183.4k xp | 176 posts
Serviços Gerais 
</ul><img src="beneficios.jpg" class="imagem-beneficios" />

Esta parte do código do html é para nao ter espaço no html para que na estilização do css, tanto a lista (ul) quanto a imagem(img) ocupem 100% da pagina, se houver espaço no html a estilização nao irá funcionar pois este espaço aí entra na contabilização dos 100% da pag.

segue o código no css como ficaria:

.lista-beneficios {
  width: 40%;
  display: inline-block;
  vertical-align: top;
}

.imagem-beneficios {
  width: 60;
}

A pergunta é, o meu vs code faz a identação automática, entao nao deixa eu fazer esta alteração de retirar os espaço no html do final da tag com inicio da tag da , que ficaria como acima ja falado na primeira linha. sempre que eu saio do vs code , ele volta o espaçamento automatico entre as duas tags. Alguem sabe me dizer como fazer, eu diminui a lagura da .lista-beneficios e .imagem-beneficios, mas nao ficou igual ao do professor, ficou mais ou menos igual, mas nao tanto.

3 respostas
por WELLITON MARTINS DOS SANTOS
| 183.4k xp | 176 posts
Serviços Gerais 
.conteudo-beneficios {
  width: 640px;
  margin: 0 0 0 198px;
}

eu acrescentei esta margin no .conteudo-beneficios para chegar a lista e a imagem um pouco mais para a direita, ficando um pouco melhor dividido na pagina como o professor mostrou na aula. Mas aquele problema ainda persiste, pois nao consigo juntar as tags ul e img, eliminando o espaço entre elas. No caso eu teria que desabilitar a identaçao automatica? se sim, me diga como faço. Obrigado.

solução!
por Lorena Garcia
| 8911.7k xp | 13298 posts
Alura Scuba Team Suporte Educacional

Oi Welliton, tudo bem?

Quando separamos a tag ul datag img colocando-as em linhas diferentes, é como se adicionássemos um espaço entre elas. O jeito mais simples de resolver esse problema seria diminuindo a largura da imagem em 1% da seguinte maneira:

.imagem-beneficios {
    width: 59%;
}

E pode voltar as outras configurações para as que estavam antes, como viu nas aulas.

A indentação automática do VSCode não permite manter as duas tags na mesma linha, então desativa-lá resolveria o problema, mas não acho que seja necessário nesse momento. Mas se quiser, você pode ir em File > Preferences > Settings > Auto Indent e marcar a opção none.

Espero ter ajudado.

Um abraço e bons estudos.

por WELLITON MARTINS DOS SANTOS
| 183.4k xp | 176 posts
Serviços Gerais

Ajudou sim, muito obrigado.