Where does the space around img elements originate?

Question

I needed to create an image sprite using ten 16px square transparent PNG files. So I put together a simple HTML page with my 10 images inside a div with a background colour. I

Answer 1

Do you mean the bottom space? If so I have an answer to the similar question at

https://stackoverflow.com/a/15357037/1061567

If we are talking about other issue, please make it more clear by showing us some example at http://jsfiddle.net

Answer 2

This just sounds like white space between your <img /> tags.

If your HTML is:

<img src="/path/to/image/1.png" />
<img src="/path/to/image/2.png" />
<img src="/path/to/image/3.png" />

Then you will get spaces between your images the same as you would get space between your words if you wrote them on different lines.

If you wrote your HTML as follows:

<img src="/path/to/image/1.png" /><img src="/path/to/image/2.png" />

Then there would be no white space between the images.

This is the "expected" behaviour of inline and inline-block elements (img elements are inline-block).

There are a few ways to get around this as shown in Chris Coyer's article Fighting the space between inline block elements.