html <ul> adding unwanted space underneath every <li>

Question

I am getting an unwanted visual quirk from creating <li>'s within an <ul>. It is producing an unwanted space underneath each item.

This is the simplified code that I am currently using.

<ul style="margin:0; padding:0;">
  <li style="border:1px solid #000; margin:0; padding:0;">Item 1</li>
  <li style="border:1px solid #000; margin:0; padding:0;">Item 2</li>
  <li style="border:1px solid #000; margin:0; padding:0;">Item 3</li>
  <li style="border:1px solid #000; margin:0; padding:0;">Item 4</li>
  <li style="border:1px solid #000; margin:0; padding:0;">Item 5</li>
</ul>

If you notice, there is a space underneath the text for each <li> even though I've stated that I want my margin and padding to be 0.

This happening in both Google Chrome v14 and Firefox v4.

Here's the screenshow:

I updated the jsfiddle to include the image: http://jsfiddle.net/Ab5e9/4/

edit: added the margin:0 and padding:0 to each <li>

edit: added image and jsfiddle

Answer 1

You've stated that you want no padding and no margin on the ul only.

You need to do that for the lis to.

Either do this

<li style="border:1px solid #000; margin:0; padding:0;">Item 1</li>

or add these styles to your stylesheet (better as you only need to do it once AND it makes your HTML less cluttered)

ul{
    margin:0; 
    padding:0;
}

li{
    border:1px solid #000;
    margin:0;
    padding:0;
}

Example: http://jsfiddle.net/jasongennaro/Ab5e9/

EDIT

As per the comment from @EverTheLearner

I don't know how else to describe it. There is a space there. Its very tiny but its there. Look at the space above the text and then the space below the text. There is a difference there.

here is what I see when I increase the zoom on the browser to 250%

There must be something else there. Please post a link to a live example.

EDIT 2

Following the updated fiddle, the problem is not between the lis but between the text and the bottom of the li.

One way to get rid of this is the change the line-height.

In the example below, I set it to .8em

Example 2: http://jsfiddle.net/jasongennaro/Ab5e9/1/