Internet Explorer has a terrible habit of putting gaps underneath images if you have a space after the image code. It’s quite annoying when trying to line images up on top of each other and keep your code neat. Thankfully there’s an easy fix!

Before Fix

After Fix

The Cure:

Add the following to your CSS style sheet.

img {
	display: block;
}

That will automatically apply the correct styling to all your images.

NOTE: You can not have images side by side with this styling, they will automatically drop underneath each other. If you need them side by side you can do so by putting it in a table or using CSS.

If you only want to apply the style to some images you can add the following to your image tags.

style="display:block;"

This will apply the style to the image who’s tag you have placed it in.

So why does Internet Explorer put the gap there in the first place?

Well IE sets the default display as “inline” which effectively places the image inline with the text. The problem with this is there is a gap underneath text for letters that go under the line (i.e. j p q etc.). IE then proceeds to line up the text and the image as per the image below.

Image Inline With Text

This leaves an annoying gap underneath images even when there is no text featured. Just another way Internet Explorer is making our life that little bit harder.