Dentro do elemento
- porque precisamos colocar a img dentro de uma div? não poderia ser direto a tag da img?
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!
Solucionado
Dentro do elemento
Olá, André! Tudo bem?
Obrigado por compartilhar sua dúvida no fórum.
Por que a imagem fica dentro de uma div?
Tecnicamente, não é obrigatório colocar a img dentro de uma div. A imagem pode, sim, ser usada sozinha. Porém, nos layouts do curso (e na prática do front-end), a div é usada para facilitar o controle do layout.
Principais motivos para usar a div:
div funciona como o item do grid, enquanto a img é apenas o conteúdoExemplo sem div (funciona, mas é limitado):
<section class="categorias">
<img src="categoria.png" alt="Categoria">
</section>
Nesse caso, qualquer ajuste de espaçamento ou alinhamento fica preso à imagem.
Exemplo com div (mais organizado e escalável):
<section class="categorias">
<div class="categoria">
<img src="categoria.png" alt="Categoria">
</div>
</section>
.categorias {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.categoria {
padding: 16px;
background: #f5f5f5;
}
Assim, a div controla o layout e a imagem fica só responsável pelo conteúdo visual.
Você pode usar a img direto, mas envolver em uma div é uma boa prática para layouts responsivos, organização do código e projetos que vão crescer.
Espero ter ajudado!
Conte com o fórum sempre que precisar!
Abraços e bons estudos! ✨