title: Bootstrap tab: have unknown space between tabs
body: <p>I am puzzled by the space between Bootstrap tabs in my particular case.</p>
  
  <p>I am using Bootstrap 2.3.2 and Ace Theme (<a href="http://wrapbootstrap.com/preview/WB0B30DGR" rel="nofollow">http://wrapbootstrap.com/preview/WB0B30DGR</a>) for a web application. </p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>    &lt;div&gt;
          &lt;ul class="nav nav-tabs " id="my-tabs"&gt;
            &lt;li&gt;&lt;a href="#page-1" data-toggle="tab"&gt;1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#page-2" data-toggle="tab"&gt;2&lt;/a&gt;&lt;/li&gt; 
            &lt;li&gt;&lt;a href="#page-3" data-toggle="tab"&gt;3&lt;/a&gt;&lt;/li&gt; 
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="tab-content" id="my-panes"&gt;
  
          &lt;div class="tab-pane" id="page-1"&gt;
              tab 1
          &lt;/div&gt;  
  
          &lt;div class="tab-pane" id="page-2"&gt;
              tab 2
          &lt;/div&gt; 
  
          &lt;div class="tab-pane" id="page-3"&gt;
              tab 3
          &lt;/div&gt; 
  
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is my additional CSS:</p>
  
  <pre><code>#my-tabs.nav-tabs &gt; li {
      display: inline-block;
      float: none;
  }
  
  
  #my-tabs.nav-tabs &gt; li &gt; a {
      padding: 8px 16px;
      margin:0;
  }
  </code></pre>
  
  <p>Here is the jsfiddle demo: <a href="http://jsfiddle.net/edAVC/5/" rel="nofollow">http://jsfiddle.net/edAVC/5/</a></p>
  
  <p>There is space between tabs. I am puzzled by this. Spend a few hours and unable to figure out why it is there. I want to remove the space between tabs. </p>
  
  <p>Please note that I have to use display: inline-block for <code>&lt;li&gt;</code> element for other reasons. </p>
  
  <p>Let's assume no changes to my css and HTML. What additional CSS I can add to remove the space between tabs?</p>
  
  <p>Thanks and regards!</p>