My current HTML setup is as follows:
<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>
To ensure these images appear aligned horizontally, I have applied the following CSS:
div, p, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
div.container > ul li {
float: left;
background-color: yellow;
}
Despite successful implementation, there is an unexpected 4px gap at the bottom of each <li> element. This issue is visible through a slight indication of the yellow background at the bottom edge.
An illustration of this occurrence can be viewed here: http://jsfiddle.net/DBcPw/
NOTE: The problem exclusively arises when <li> elements consist of images. On the other hand, using <p> elements does not trigger the same anomaly.
In light of this situation, two fundamental questions arise:
- What is the cause of this discrepancy?
- How can this issue be rectified?