Remove Extra Space at Bottom of HTML List Item - html

Question

Is there any way to remove the extra space displayed at the bottom of an HTML List Item tag without setting a fixed height on the list item? I.e. I would like the list item to wrap to its content.
The following code shows 3 images in a horizontal list but the height of each li tag is 4px more than the image. I would like it to wrap around the image i.e. to have the same width and height. The width is currently the same but I just can't get the height to match.
HTML:
<ul>
<li><img alt="img1" src="img1.jpg" /></li>
<li><img alt="img2" src="img2.jpg" /></li>
<li><img alt="img3" src="img3.jpg" /></li>
</ul>
CSS:
li
{
display:block;
float:left;
margin:0;
padding:0;
background-color:Yellow;
}

Answer 1

This is your code: http://jsfiddle.net/23LcK/
The gap is nothing to do with the lis. It's the space reserved for descenders in letters like g and p (because the imgs are inline elements).
You can remove it with any of these applied to li img:
display: block: http://jsfiddle.net/23LcK/1/
vertical-align with top or bottom: http://jsfiddle.net/23LcK/2/

Answer 2

Set line-height:0; on the LI
li {
line-height: 0;
}
Here's a jsfiddle to prove that it works - http://jsfiddle.net/jm9Tj/

Answer 3

This should do it for you.
ul{margin-bottom:0}

Answer 4

li is wrapped in ul, which by default has some padding. Therefore as #Michael said, you have to zero out the padding of the ul element.
To avoid these problems, always try to use reset.css.
FYI: Browsers apply a default CSS on web pages. That's why you see h1 elements that big when there is no CSS in your site. Because browsers have a default CSS. And since browsers come from different companies, they have different default CSS. For example, a browser may use 10px of margin for paragraphs, while another browser user 12px. This means that you have always inconsistencies in your design. But a CSS reset is made of some general rules that removes these default CSS styles.

Answer 5

li img {
vertical-align: bottom;
}

Answer 6

There is probably a default margin or padding on the img element in the browser you are using. You can remove this using something like this:
li img {
margin: 0;
padding: 0;
}
As different web browsers use different default styles it's recommended that you use a reset stylesheet. This sets a whole load of stuff to sensible defaults so you get more consistent styling across browsers. Because it resets everything to sensible defaults you should always load the reset stylesheet before any other stylesheets.
As #Saeed mentioned there is a good reset stylesheet as well as more information on why you should use them here.