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
You've stated that you want no padding
and no margin
on the ul
only.
You need to do that for the li
s 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 li
s 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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With