James Smith

CSS veterans will probably already know this, but here’s a fix to a problem which has been bugging me for ages.

Problem:

If you have something like:

<div>
    <img src="blah.jpg" />
</div>

You may see a gap below the image on some browsers, a gap which cannot be removed by setting the padding/margins to 0:

Gap example

Solution:

<img> tags are rendered using display: inline by default, which means they act and flow like text does on a page. In order to stop spaces being added (caused by spaces next to the img tag in your html), you should set your img to use display: block:

<img style="display: block" src="..." alt="" />

This means your image will no longer act like flowing text and will no longer have a gap below it!

Caveats:

Changing from display: inline means your img tag will ignore things like text-align: center, and other alignments specific to displaying elements inline.

Mind the gap

Image credit: buhsnarf on flickr

About the Author

James Smith, British entrepreneur and developer based in San Francisco.

I'm the co-founder of Bugsnag with Simon Maynard, and from 2009 to 2012 I led up the product team as CTO of Heyzap.