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/