Picture the scenario. You've just created a fresh new div, just begging to be filled with juicy content. You begin by adding perhaps one of the coolest images you've ever seen. This is already going well. You're excited about this div, it could become number one on your top ten list.


<div>
    <img src="images/best-image-ever.jpg"/>
</div>

The Hoff with gap underneath image

But wait. What the hell is that white space doing underneath my image? I never asked for that! I never set any margin or padding, or anything. What is this black magic ruining my delicious div?

The cause

By default, images are "inline" elements - just like any text you write. Text has reserved space underneath it for "descenders". Those are the bits that go below the rest of the text in letters like "g, p, q, y" etc:

Descenders underneath text

Because your image is also an inline element, it is also being given this available space for descenders just in case it needs it. Of course, we know it doesn't - it's an image, not text! So let's do something about it.

The fix

By making your image a block level element, as opposed to inline, you remove the need for a space to be reserved for descenders. That means your white space vanishes and your image displays in all its glory, just how you intended.


img{
    display: block;
}

The Hoff block level element gap removed