Wrapper div leaves empty space under footer image

Question

I'm using a wrapper div for my website and added an image underneath my footer.

However, the wrapper div extends over the picture for just a few pixels, so you can see a slim space with the body's background colour on the bottom of the page.

This is what it looks like (the border left & right is the dev tools window)

Is there any way to remove this?

This is my relevant CSS code

body {
margin: 0;
font-family: var(--font-family);
}

body, html {
    height: 100%;
    width: 100%;
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

#wrap {
    position: absolute;
    top: 65px;
}

and this is my (collapsed) HTML code

<body>
  <header class="header">[...]</header>
  <div id="wrap">
    <section class="main">[...]</section>
    <div class="footer-social">[...]</div>
    <img src="img/hike-transpi.png" [...]>
  </div>
</body>

I looked around quite a lot and tried a few potential solutions (e.g. setting the div's background to the img or setting padding/margin to 0 etc.) but nothing worked so far.

Thanks for your help!

did you try to set the image height to match the wrap height? — Sherif Hassan, Oct 21 '22 at 18:38
the wrapper is the height of most of the website bc it wraps around almost all of the content except for the menu on top. setting the img to the same height just stretches the img upwards, unfortunately. the space remains — Rumpelstilzchen, Oct 21 '22 at 18:44
you can try `transform: translateY(-10px);` or `bottom: 10px;` on the image — Sherif Hassan, Oct 21 '22 at 18:49
@SherifHassan transform: translateY(5px); worked! Thanks for the tip — Rumpelstilzchen, Oct 22 '22 at 20:33
@Michelle that didn't change anything but thanks for your help anyway — Rumpelstilzchen, Oct 22 '22 at 20:34

Wrapper div leaves empty space under footer image

0 Answers0