Opa pessoal! Uma dúvida bem básica, mas como posso colocar uma imagem embaixo da outra no HTML/CSS?
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!
Opa pessoal! Uma dúvida bem básica, mas como posso colocar uma imagem embaixo da outra no HTML/CSS?
Opa Celso, tudo certo?
Para colocar uma imagem embaixo da outra no HTML/CSS, você pode utilizar a propriedade CSS "display: block" nas imagens desejadas. Dessa forma, elas serão exibidas uma abaixo da outra.
Aqui está um exemplo de como você pode fazer isso:
HTML:
<div class="container">
<img src="imagem1.jpg" alt="Imagem 1">
<img src="imagem2.jpg" alt="Imagem 2">
</div>
CSS:
.container img {
display: block;
}
Nesse exemplo, as imagens estão em uma div com a classe "container". A propriedade "display: block" é aplicada às imagens dentro dessa div, fazendo com que elas sejam exibidas uma abaixo da outra.
Há outras formas como utilizar a flex-box, caso queira se aprofundar deixo como recomendação de leitura o artigo abaixo:
Fico à disposição.
Tenha um bom dia e bons estudos.