duvida entre espaçamento entre header e main .

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.