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

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:开发者_C百科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

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/

As stated above by Jason Gennaro, the issue with the "space" lies in the default line-height property for your text. You can alter that attribute like so:

CSS

li {
    line-height: .8em; /* 1em = standard line height */
}

Margin and padding of 0 on an unordered list does not mean margin and padding of 0 on each list item inside it.

If you want a list item to have a specific margin and/or padding, then you have to set that on the list item.

Since your example includes an image, perhaps that is where your issue is to be found. Descenders on text can cause even empty inline elements to have height, if I understand it aright. Try vertical-align: baseline or bottom on your image; I've addressed similar-seeming problems in this way before, at any rate.

Edit: my bad, your second arrow points at an image-less li; nevertheless I'll leave this here in case it points you in the right direction,

Without seeing the code in context of everything else, it's hard to say. But try setting line-height: 1em;. It could be the line-height is set to something more, causing the space.

All HTML elements automatically adds a small amount of padding between one line and the next (this is so one line isn't touching the next all the time, that would look awful).

And padding isn't allowed negative values, so you can't actually make the boxes any smaller (vertically). Except that you can adjust the line-height. However, you can move the boxes closer together by giving the margin property a negative value.

I used ul li {margin-top:-2px; margin-bottom:-2px} you can continue to move them closer together but if you do move them any closer together it looks weird because the boxes overlap.

I set the line-height to 1 to minimize space between the lines and then I moved the boxes closer together. My example is as close together as you can get the boxes.

Example: http://jsfiddle.net/MarkKramer/Ab5e9/12/

also, it was a waste of your time typing the same inline style for every li you should've just typed the style into a style sheet, like I did in the example.