[html] Use CSS to remove the space between images

Given:

<img src="..."/>
<img src="..."/>

The result is two images with a single space between them. It seems that the normal behavior is to show any number of spaces, newlines, and tabs as a single white space. I know I can do the following:

<img src="..."/><img src="..."/>

OR

<img src="..."/><!--
--><img src="..."/>

OR

<img src="..."/
><img src="..."/>

Or any number of other hacks. Is there a way to remove that whitespace with CSS? e.g.

<div class="nospace">
    <img src="..."/>
    <img src="..."/>
</div>

The best solution I've found for this is to contain them in a parent div, and give that div a font-size of 0.

An easy way that is compatible pretty much everywhere is to set font-size: 0 on the container, provided you don't have any descendent text nodes you need to style (though it is trivial to override this where needed).

.nospace {
   font-size: 0;
}

jsFiddle.

You could also change from the default display: inline into block or inline-block. Be sure to use the workarounds required for <= IE7 (and possibly ancient Firefoxes) for inline-block to work.

I found that the only option that worked for me was

font-size:0;

I was also using overflow and white-space: nowrap; float: left; seems to mess things up

I prefer do like this

img { float: left; }

to remove the space between images