Html <ul> adds unwanted space under each <li>

Question

I get an unwanted visual fad from creating an <li> inside an <ul> . This creates undesirable space under each element.

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 under the text for each <li> , although I said that I want my field and pad to be 0.

This happens in both Google Chrome v14 and Firefox v4.

Here are the screenshots:

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

edit: edge added: 0 and indent: 0 to each <li>

edit: added image and jsfiddle

Answer 1

You stated that you do not want padding and no margin only in ul .

You need to do this for li to.

Or do it

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

or add these styles to your stylesheet (better since you only need to do this 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

According to comment by @EverTheLearner

I do not know how to describe it. There is space there. Its very tiny, but its there. Look at the space above the text, and then above the text. There is a difference there.

this is what i see when I zoom in on the browser up to 250%

There must be something else. Send a link to a live example.

EDIT 2

After the updated scripts, the problem is not between li , but between the text and the bottom of li .

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

In the example below, I installed it in .8em

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

Answer 2

As stated above by Jason Gennaro, the problem with “space” is the default line-height for your text. You can change this attribute as follows:

CSS

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

Answer 3

Margin and filling 0 in an unordered list does not mean margin and filling 0 in each list item inside it.

If you want the list item to have a specific field and / or addition, you need to set it in the list item.

Answer 4

Since your example includes an image, perhaps your problem will be found there. Descriptors in the text can lead to the fact that even empty inline elements will have a height, if I understand it correctly. Try vertical-align: baseline or bottom on your image; So I ran into similar problems before, anyway.

Edit : my bad, the second arrow points to the image li ; nonetheless, I will leave it here if he points you in the right direction,

Answer 5

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

Answer 6

All HTML elements automatically add a small amount of indentation between one line and the next (this means that one line does not touch the next all the time, which will look awful).

And indentation is not allowed negative values, so you can not make the boxes smaller (vertically). In addition, you can adjust the line height. However, you can move the fields closer to each other by specifying a field value of negative value.

I used ul li {margin-top:-2px; margin-bottom:-2px} ul li {margin-top:-2px; margin-bottom:-2px} , you can continue to move them closer to each other, but if you move them closer to each other, it looks strange because the fields overlap.

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

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

In addition, it was a waste of time entering the same inline style for each li , which you just had to enter the style into the stylesheet, as it was in the example.