title: Get rid of spaces between spans
body: <p>I'm trying to emulate a tab bar with HTML.</p>
  
  <p>I'd like the width of each tab to be set according to the text length (that is, no fixed width) and to word wrap in case it exceeds the screen width.</p>
  
  <p>I've almost achieved it:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;style type="text/css"&gt;
      #myTabs .tab {
      float: left;
      }
  
      #myTabs .tab_middle {
          margin: 0;
          padding: 0;
          border: none;
      background-image:url('images/tabs/tab_middle.png');
      }
  
      #myTabs .tab_left {
          margin: 0;
          padding: 0;
          border: none;
          background-image:url('images/tabs/tab_left.png');
      }
  
      #myTabs .tab_right {
          margin: 0;
          padding: 0;
          border: none;
      background-image:url('images/tabs/tab_right.png');
      }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="myTabs"&gt;
    &lt;div class='tab'&gt;
          &lt;span class='tab_left'&gt;&amp;nbsp;&lt;/span&gt;
          &lt;span class='tab_middle'&gt;very very looong&lt;/span&gt;
          &lt;span class='tab_right'&gt;&amp;nbsp;&lt;/span&gt;
      &lt;/div&gt;
    &lt;div class='tab'&gt;
          &lt;span class='tab_left'&gt;&amp;nbsp;&lt;/span&gt;
          &lt;span class='tab_middle'&gt;another loooong tab&lt;/span&gt;
          &lt;span class='tab_right'&gt;&amp;nbsp;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div style='clear:both'&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But, there's a very annoying space between the opening tab image and the closing one.</p>
  
  <p>As you can see, I've tried with padding, spacing, and border, with no luck.</p>
  
  <p><strong>EDIT:</strong><br>
  I tried replacing the spans with a small table (one row, three <code>&lt;td&gt;</code>s), but it's the same, only the space between is smaller.</p>