title: how to delete extra space between buttons?
body: <p>please check out <a href="http://jsfiddle.net/NPqSr/">this code in jsfiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;div id="menu"&gt;
          &lt;a href="#" class="buttons"&gt;Home&lt;/a&gt;
          &lt;a href="#" class="buttons"&gt;About Us&lt;/a&gt;
          &lt;a href="#" class="buttons"&gt;Pictures&lt;/a&gt;
          &lt;a href="#" class="buttons"&gt;Contact Us&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#main
  {
      width: 64em;
      height: 25em;
  }
  
  #menu
  
      {
          background-color: #00b875;
          height: 3em;
      }
  
      .buttons
      {
          text-decoration: none;
          color: #ffffff;
          line-height: 3em;
          display: inline-block;
          padding-left: 10px;
          padding-right: 10px;
          font-family: courier new;
          -moz-transition: 1s linear;
          -ms-transition: 1s linear;
          -o-transition: 1s linear;
          -webkit-transition: 1s linear;
          transition: 1s linear;
      }
  
      .buttons:hover
      {
          background-color: #0d96d6;
      }
  </code></pre>
  
  <p>when switching from one button to another very quickly, you'll notice that there is actually some gap in between two buttons. i want to get rid of this space. any ideas? if you do answer the question, please also explain why a certain property will fix this.</p>
  
  <p>i know that it is tweakable using padding and margin, but the result is likely to get distorted upon zoom. please point out a stable way of solving the problem.</p>
  
  <p>thanks</p>