Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

duvida entre espaçamento entre header e main .

olá, minha duvida é sobre espaçamento entre imagem dos carrinhos ate imagem das frutas, tem como diminuir essa espaçamento entre as imagens?

imagem do projeto em desenvolvimento de lista de mercado

Garanta sua matrícula hoje e ganhe + 2 meses grátis

Continue sua jornada tech com ainda mais tempo para aprender e evoluir

Quero aproveitar agora
3 respostas
solução!

Olá Vinicius! Tudo bem?

Para diminuir o espaçamento entre as imagens dos carrinhos e das frutas, você pode utilizar a propriedade CSS "margin". Essa propriedade define o espaço entre os elementos e pode ser ajustada de acordo com a sua necessidade.

Por exemplo, se você quiser diminuir o espaçamento vertical entre as imagens, pode adicionar o seguinte código CSS:

img {
  margin-bottom: 10px; /* ou outro valor que desejar */
}

Esse código irá diminuir o espaçamento entre as imagens e pode ser ajustado de acordo com a sua preferência.

Espero ter ajudado.

Um abraço e bons estudos.

Vinicius, acredito que irá depender muito da situação do seu atual código. É necessário checar se está usando margin-bottom ou margin-top:

Eu fiz um pequeno exemplo particular para quando acontece nessas duas situações:

HTML:

<header>
  <img src="manchester-city-football-club-2048.png"/>
</header>

<hr/>

<main>
  <img src="Real_Madrid_CF.png"/>
</main>

CSS:

body {
  text-align: center;
}

header {
  margin-bottom: 20px;
}

main {
  margin-top: 20px;
}

img {
  width: 5%;
}

Resultado:

Perceba que eu usei header e main como elementos principais de cada um para que houvesse algum tipo de espaçamento pelo margin.

Ou seja, uma solução adequada seria observar seu margin, se está usando o bottom ou top:

  • margin-bottom: espaçar para baixo.
  • margin-top: espaçar para cima.

Simplicando: o problema deve está no margin-bottom ou margin-top em algum lugar.

Pode acessar o código acima no codepen: https://codepen.io/matheus-souza-the-vuer/pen/rNqvYvG

Obrigado, Mateus e Lorena

Desconhecia existência margin-top e bottom.