space between <img> tags

Question

if i use this code (with spaces between the two tags):

<img src="....." style="border:0px;margin:0px" />
<img src="....." style="border:0px;margin:0px" />

there are 4 pixels between images. if I use this:

<img src="....." style="border:0px;margin:0px" /><img src="...." style="border:0px;margin:0px" />

the space between images disappear, on all browsers!

Why????????

Answer 1

That's because white space is significant for inline elements. You can always float your images if you want to have them line up.

Edit: As requested, here is a simple example:

/* This is used to "clear" the floated elements */
.images { overflow: hidden; width: 100% }

/* float the elements so that white space does not matter */
.images img { float: left; }

<div class="images">
    <img src="http://dummyimage.com/150x100/000/fff&text=first+image" alt="first image" />
    <img src="http://dummyimage.com/150x100/6aa8de/fff&text=second+image" alt="second image" />
    <img src="http://dummyimage.com/150x100/ff6500/fff&text=third+image" alt="third image" />
</div>

Answer 2

<img src="http://www.nataliedee.com/111908/whatever-dude-whatever.jpg" style="border:0px;margin:0px;float:left;width:200px;" />
<img src="http://www.nataliedee.com/111908/whatever-dude-whatever.jpg" style="border:0px;margin:0px;clear:both;width:200px;" />

http://jsfiddle.net/JNWc7/