title: How can I eliminate spacing between inline elements in CSS?
body: <p>I have a div with a bunch of image tags inside, here is an example:</p>
  
  <pre><code>&lt;div style="margin: 0; padding: 0; border: 0;"&gt;
      &lt;a href="/view/foo1"&gt;&lt;img src="foo1.jpg" alt="Foo1" /&gt;&lt;/a&gt;
      &lt;a href="/view/foo2"&gt;&lt;img src="foo2.jpg" alt="Foo2" /&gt;&lt;/a&gt;
      &lt;a href="/view/foo3"&gt;&lt;img src="foo3.jpg" alt="Foo3" /&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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 &lt; 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.</p>