title: Remove Extra Space at Bottom of HTML List Item
body: <p>Is there any way to remove the extra space displayed at the bottom of an HTML List Item tag <b>without setting a fixed height on the list item?</b>  I.e. I would like the list item to wrap to its content.</p>
  
  <p>The following code shows 3 images in a horizontal list but the height of each li tag is 4px more than the image.  I would like it to wrap around the image i.e. to have the same width and height.  The width is currently the same but I just can't get the height to match.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;img alt="img1" src="img1.jpg" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img alt="img2" src="img2.jpg" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img alt="img3" src="img3.jpg" /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>li 
  { 
      display:block; 
      float:left; 
      margin:0;
      padding:0;
      background-color:Yellow;
  }
  </code></pre>