Use CSS to remove the space between images [duplicate]

Question

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> 

Answer 1

Make them display: block in your CSS.

Answer 2

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.