title: How do I remove the visibility of spaces between inline elements?
body: <p>Say I have several inline-block div tags, like this</p>
  
  <pre><code>&lt;div class="image"&gt;
  
  &lt;/div&gt;
  &lt;div class="image"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>class image just sets their size to 100x100 and a gray background color. Their margin and borders are set to 0, and yet there is spacing between the two rectangles.</p>
  
  <p>If I write the HTML such as this, however:</p>
  
  <pre><code>&lt;div class="image"&gt;
  
  &lt;/div&gt;&lt;div class="image"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Removing all whitespace between the divs, the spacing disappears.</p>
  
  <p>Since I don't want to write my HTML like that, I'm thinking that there must be a way to remove whitespace using CSS. I don't care if the whitespace is removed, hidden or downsized as long as it's visibility is removed.</p>
  
  <p>Thanks for any help</p>
  
  <hr>
  
  <p>As requested, JSFiddle: <a href="http://jsfiddle.net/6h3Jx/" rel="noreferrer">http://jsfiddle.net/6h3Jx/</a></p>
  
  <hr>
  
  <p>Updated with word-spacing: <a href="http://jsfiddle.net/6h3Jx/1/" rel="noreferrer">http://jsfiddle.net/6h3Jx/1/</a></p>