1

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 added some simple CSS to make the div fit the content and remove padding, margins etc.

In Firefox using Firebug I examined the width of the div and found it to measure 196 x 21 pixels. I can clearly see white space between the images. As far as I could tell I have no margins, padding or borders.

If instead I float the images inside the div then I get a measurement of 160 x 16 pixels (which is what I expected originally).

I have also looked at this page in Chrome and IE and get identical results. So I imagine the behaviour must be described in the standards somewhere?

I'm curious as to where the additional white space around the image originates?

(Apologies if this has been answered elsewhere)

Mark McLaren
  • 11,470
  • 2
  • 48
  • 79

2 Answers2

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.

My Head Hurts
  • 37,315
  • 16
  • 75
  • 117
  • Great thanks, that makes sense. Although I'm not entirely sure why a carriage return equates to a small gap but it probably makes sense in a text context. – Mark McLaren Mar 13 '13 at 09:04
  • @MarkMcLaren if you put multiple spaces between two words then the browser would still only show one space - this is the same behaviour with carriage returns. As far as the browser is concerned it is just a white space between two `inline` / `inline-block` elements – My Head Hurts Mar 13 '13 at 09:07
0

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

Community
  • 1
  • 1
zdesam
  • 2,936
  • 3
  • 25
  • 32