Question

I have a div with a bunch of image tags inside, here is an example:

<div style="margin: 0; padding: 0; border: 0;">
    <a href="/view/foo1"><img src="foo1.jpg" alt="Foo1" /></a>
    <a href="/view/foo2"><img src="foo2.jpg" alt="Foo2" /></a>
    <a href="/view/foo3"><img src="foo3.jpg" alt="Foo3" /></a>
</div>

Because there is whitespace between the tags, browsers will display some whitespace between the images (Chrome decides on 4px). How can I tell the browser to show NO whitespace whatsoever between the images, without placing the > and < directly next to each other? I know letter-spacing applies in addition to what the browser decides to use, so that’s useless even with a negative value. Basically I’m going for something like Twitter has at the bottom of their home page. I looked at their code and they’re using an unordered list. I could just do that but I’d like the technical explanation for why there appears to be no way to eliminate the white space from between these images.

Answer 1

try to add img {margin:0;padding:0;float:left}

in other words remove any default margin and padding of browsers for img and float them.

Demo: http://jsfiddle.net/PZPbJ/