Why there is a gap between the elements, without a gap command

Question

I'm doing my second project in HTML and CSS and I'm losing my mind trying to figure out why there is a spacing where it shouldn't. It is so specific I don't even know how to search for it.

Basically I have two main block with elements, and there is a gap between this two blocks, but I don't know why. I already tried to change de other gaps, and the aligns commands. Nothing works. The issue is the gap between the image and the write "Salada Variada"

     :root {
      --texts-color: #242424;
     }
     
     body * {
      font-family: Poppins;
      color: var(--texts-color);
     }
     
     body {
      background-color: #d8eed2;
     }
     
     #Info {
      display: flex;
      height: 696px;
      width: 360px;
      flex-direction: column;
      align-items: center;
      gap: 0px;
      background-color: #fdfdfd;
      border-radius: 32px 32px 0px 0px;
      background: var(--surface, #fdfdfd);
      margin: 104px auto 0px;
      border: solid brown 1px;
      column-gap: 0px;
     }
     
     #imagem {
      display: flex;
      width: 280px;
      height: 280px;
      transform: translateY(-23%);
      border: solid orange 1px;
     }
     
     #Container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      border: pink solid 1px;
     }
     
     #name-plate {
      text-align: center;
      font-weight: 600;
      font-size: 24px;
      font-family: Poppins;
      line-height: 32px;
      border: solid purple 1px;
     }
     
     #energia-porção {
      display: flex;
      padding: 8px 0px;
      align-items: center;
      gap: 24px;
      align-self: stretch;
      border: red solid 1px;
      width: 296px;
      height: 64px;
     }
     
     ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      border: green solid 1px;
      align-items: center;
      gap: 8px;
      flex: 1 0 0;
      padding-left: 0;
     }

<div id="Main"></div>
  <div id="Info">
  <div id="imagem"><img src="./Midia/dish-image.png" alt="" /></div>
    <div id="Container">
    <div id="name-plate">Salada Variada</div>
    <div id="energia-porção">
        <ul>
          <li>Energia</li>
          <li>221,15 kcal</li>
        </ul>
        <ul>
          <li>Porção</li>
          <li>240 g</li>
        </ul>
      </div>
      </div>
        </div>
      </div>
    </div>
    <button></button>
  </div>

Answer 1

#imagem has this property: transform: translateY(-23%);

If you remove it, there will be no gap.

If you want to move an element #imagem higher without creating a gap, you can use e.g. margin-top with a negative value (margin-top:-23%).

:root {
      --texts-color: #242424;
     }
     
     body * {
      font-family: Poppins;
      color: var(--texts-color);
     }
     
     body {
      background-color: #d8eed2;
     }
     
     #Info {
      display: flex;
      height: 696px;
      width: 360px;
      flex-direction: column;
      align-items: center;
      gap: 0px;
      background-color: #fdfdfd;
      border-radius: 32px 32px 0px 0px;
      background: var(--surface, #fdfdfd);
      margin: 104px auto 0px;
      border: solid brown 1px;
      column-gap: 0px;
     }
     
     #imagem {
      display: flex;
      width: 280px;
      height: 280px;
      margin-top: -23%;
      border: solid orange 1px;
     }
     
     #Container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      border: pink solid 1px;
     }
     
     #name-plate {
      text-align: center;
      font-weight: 600;
      font-size: 24px;
      font-family: Poppins;
      line-height: 32px;
      border: solid purple 1px;
     }
     
     #energia-porcao {
      display: flex;
      padding: 8px 0px;
      align-items: center;
      gap: 24px;
      align-self: stretch;
      border: red solid 1px;
      width: 296px;
      height: 64px;
     }
     
     ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      border: green solid 1px;
      align-items: center;
      gap: 8px;
      flex: 1 0 0;
      padding-left: 0;
     }

<div id="Main"></div>
  <div id="Info">
  <div id="imagem"><img src="./Midia/dish-image.png" alt="" /></div>
    <div id="Container">
    <div id="name-plate">Salada Variada</div>
    <div id="energia-porcao">
        <ul>
          <li>Energia</li>
          <li>221,15 kcal</li>
        </ul>
        <ul>
          <li>Porção</li>
          <li>240 g</li>
        </ul>
      </div>
      </div>
        </div>
      </div>
    </div>
    <button></button>
  </div>

By the way, you should not use an accented in the id/class name. Use #energia-porcao instead of #energia-porção