title: remove pixels between DIVs without deleting whitespace
body: <pre><code>.littlebox { margin:2px; padding:5px; width:100px; height:100px; border:1px solid #ccc; display:inline-block; }
  .divrow { width:100%; height:120px; }
  
  
   &lt;div class="divrow"&gt;
      &lt;div class="littlebox"&gt;first&lt;/div&gt;
      &lt;div class="littlebox"&gt;second&lt;/div&gt;
      &lt;div class="littlebox"&gt;third&lt;/div&gt;
   &lt;/div&gt;
  
   &lt;div class="divrow"&gt;
       &lt;div class="littlebox"&gt;first&lt;/div&gt;&lt;div class="littlebox"&gt;second&lt;/div&gt;&lt;div class="littlebox"&gt;third&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>These two render differently, in the first row there is a small space between each div, and in the second there are none. Setting the margin to 0px will still make the space visible.</p>
  
  <p><a href="http://jsfiddle.net/F3f3C/" rel="nofollow">http://jsfiddle.net/F3f3C/</a></p>
  
  <p>I know that float:left instead of display:inline-block does solve the problem, but I wonder if there is a way to do it without using float. </p>