Dentro do elemento
- porque precisamos colocar a img dentro de uma div? não poderia ser direto a tag da img?
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! ✨