CSS-only technique to remove whitespace from between inline-block elements

gistfile1.html

<!--
  Here is a CSS-only technique to remove whitespace from between inline-block
  elements.  Note that any text nodes that are direct children of the 
  containing-element will need their font-size manually readjusted.
-->

<style type="text/css">
  .big-text {
    font-size: 48px;
  }
  
  .normal-text {
    font-size: 16px;
  }
  
  .small-text {
    font-size: 10px;
  }
  
  .big-text, .normal-text, .small-text {
    margin-bottom: 50px;
  }
  
  .containing-element {
    background: #fdd;
  }
  
  .inline-block-element {
    background: #ddf;
    border: 1px solid #aaf;
    border-right: 1px solid #2f2;
    height: 4em;
    width: 4em;
  }


  /**** here's the magic ****/
  .containing-element {
    font-size: 5%;
  }

  .inline-block-element {
    display: inline-block;
    *display: inline; zoom: 1; /* for IE */
  
    font-size: 2000%;
    margin-left: -1px;
    *margin-left: 0; /* for IE */
  }
</style>


<div class="big-text">
  Example with big font-size
  <div class="containing-element">
    <div class="inline-block-element">&nbsp;</div>
    <div class="inline-block-element">&nbsp;</div>
    <div class="inline-block-element">&nbsp;</div>
    <div class="inline-block-element">&nbsp;</div>
  </div>
</div>

<div class="normal-text">
  Example with normal font-size
  <div class="containing-element">
    <div class="inline-block-element">&nbsp;</div>
    <div class="inline-block-element">&nbsp;</div>
    <div class="inline-block-element">&nbsp;</div>
    <div class="inline-block-element">&nbsp;</div>
  </div>
</div>

<div class="small-text">
  Example with small font-size
  <div class="containing-element">
    <div class="inline-block-element">&nbsp;</div>
    <div class="inline-block-element">&nbsp;</div>
    <div class="inline-block-element">&nbsp;</div>
    <div class="inline-block-element">&nbsp;</div>
  </div>
</div>