Удалить лишнее пространство внизу элемента списка HTML

Есть ли способ удалить лишнее пространство, отображаемое в нижней части тега элемента списка HTML , без установки фиксированной высоты элемента списка? Т.е. Я хотел бы, чтобы элемент списка был перенесен в его содержимое.

Следующий код показывает 3 изображения в горизонтальном списке, но высота каждого тега li на 4 пикселя больше, чем у изображения. Я хотел бы, чтобы он обернулся вокруг изображения, т.е. имел одинаковую ширину и высоту. Ширина в настоящее время такая же, но я просто не могу подобрать высоту.

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;
}