title: html <ul> adding unwanted space underneath every <li>
body: <p>I am getting an unwanted visual quirk from creating <code>&lt;li&gt;</code>'s within an <code>&lt;ul&gt;</code>.  It is producing an unwanted space underneath each item.<br/></p>
  
  <p>This is the simplified code that I am currently using.</p>
  
  <pre><code>&lt;ul style="margin:0; padding:0;"&gt;
    &lt;li style="border:1px solid #000; margin:0; padding:0;"&gt;Item 1&lt;/li&gt;
    &lt;li style="border:1px solid #000; margin:0; padding:0;"&gt;Item 2&lt;/li&gt;
    &lt;li style="border:1px solid #000; margin:0; padding:0;"&gt;Item 3&lt;/li&gt;
    &lt;li style="border:1px solid #000; margin:0; padding:0;"&gt;Item 4&lt;/li&gt;
    &lt;li style="border:1px solid #000; margin:0; padding:0;"&gt;Item 5&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>If you notice, there is a space underneath the text for each <code>&lt;li&gt;</code> even though I've stated that I want my margin and padding to be 0.</p>
  
  <p>This happening in both Google Chrome v14 and Firefox v4.</p>
  
  <p>Here's the screenshow:</p>
  
  <p><img src="https://i.stack.imgur.com/PiomS.png" alt="enter image description here"></p>
  
  <p>I updated the jsfiddle to include the image: <a href="http://jsfiddle.net/Ab5e9/4/" rel="nofollow noreferrer">http://jsfiddle.net/Ab5e9/4/</a></p>
  
  <p>edit: added the margin:0 and padding:0 to each <code>&lt;li&gt;</code></p>
  
  <p>edit: added image and jsfiddle</p>