Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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:

enter image description here

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

like image 692
EverTheLearner Avatar asked Oct 01 '11 22:10

EverTheLearner


1 Answers

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%

enter image description here

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/

like image 111
Jason Gennaro Avatar answered Sep 28 '22 14:09

Jason Gennaro