4px Gap Below Floated <li> Elements That Contain Images

Question

I have the following HTML:

<div class="container">
    <ul>
        <li><img src="30x30.gif" /></li>
        <li><img src="30x30.gif" /></li>
        <li><img src="30x30.gif" /></li>
    </ul>
    <div style="clear: both" />
</div>

I want these images to be nicely strung together along the horizontal, so I apply the following CSS:

div, p, ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

div.container > ul li {
    float: left;
    background-color: yellow;
}

This works. However, for some reason there is a 4px gap at the bottom of the <li> elements. I know this because I can see a sliver of the yellow background (just at the bottom, not all the way around).

You can see an example of this happening here: http://jsfiddle.net/DBcPw/

NOTE: This only seems to happen when the <li> elements contain images. If I try it with <p> elements instead, the problem doesn't occur.

So, my two questions are:

1. Why is this happening?
2. What can I do to fix it?

Answer 1

Here is an update to your jsfiddle

I added:

img{display:block; float:left;}

It removes the additional padding and margin that browsers tend to apply to an image to give them some spacing that you might not want. If you want to remove the spacing make them display :block and if you want them to sit beside each other then make the images float:left.

Answer 2

The <img> tag takes its spacing from the font you're currently using, (white space dependent) so set font-size: 0; on the <li>s and it will be fine.

li {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
}

http://jsfiddle.net/Kyle_Sevenoaks/DBcPw/2/