Having a weird spacing line below <img />s is the bane of my existence. So here I've documented the (usually) quick fix for everyone like me who always forgets:

The Problem

You want to wrap an image in a container and have it take up the whole space. But it always adds a seemingly random margin below the image as you can see below:

.container {}

.image {
    height: 100%;
    width: 100%;
}

<div class="container">
    <img class="image" src="your image here"/>
</div>

The Solution

The solution is (in most cases) a single line of CSS: You need to set display: block on the image. If you want to know more about why this is the solution, have a look at the MDN docs on the display property.

.container {}

.image {
    display: block;
    height: 100%;
    width: 100%;
}

<div class="container">
    <img class="image" src="your image here"/>
</div>