Question 245351 in Html Question posted in
Some basic documentation can be found here.

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

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>
Tags:

2

Answers


  1. 0

    #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

    Login or Signup to reply.
  2. 0

    I don’t know if your code reference was complete, but there seems to be three closing div-tags that has no corresponding opening-tag. Try this instead:

    <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>
  <button></button>
</div>

    Furthermore, a good tip to debug layout and styling is to use the inspector tool in your browser. Right click anywhere in the view and click inspect, then you can view and adjust the styling in real-time which simplifies debugging greatly

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search