CODEWITHSUNDEEP
htmlcss
Mark McLaren
Mark McLaren

Reputation: 11540

Where does the space around img elements originate?

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)

Upvotes: 1

Views: 165

Answers (2)

My Head Hurts
My Head Hurts

Reputation: 37665

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.

Upvotes: 2

zdesam
zdesam

Reputation: 2976

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

Upvotes: 0

Related Questions