title: Spacing between 2 spans does not comply
body: <p>I have this code:</p>
  
  <pre><code>&lt;div class="mainmenu"&gt;
      &lt;span class="mainmenuitem"&gt;
          Item1
      &lt;/span&gt;
      &lt;span class="mainmenuitem"&gt;
          Item2
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I use this CSS:</p>
  
  <pre><code>.mainmenu{
   height:        25px;
   padding-left:  15px;   
  }
  .mainmenuitem{
  height:             25px;
  line-height:        25px;
  background-color:   #F1F2F3;
  text-align:         center;
  padding-top:        0px;
  padding-bottom:     0px;
  padding-left:       5px;
  padding-right:      5px;
  margin-right:       1px;
  margin-left:        0px;
  display:            inline-block;
  vertical-align:     middle;
  color:              #00537B;
  }
  </code></pre>
  
  <p>But the problem is that the space between the 2 menuitems is more than 1 pixel. How to prevent this? If I use margin-right with one pixel, why is the space between more than 1 pixel? If I make it 10 pixels the space between them increases but it still does not match 10 pixels...</p>