Forum Moderators: not2easy
<div id="nav"><img src="images/navLeft.jpg"><img src="images/navOneOff.jpg"></div>
The img elements are floated left, and have 0 margin and padding defined, yet for some reason there is a small gap between the images. Anyone know what might cause this and/or how to fix it?
Thanks.
<html>
<head>
<style>
img {
width: 100px; height: 100px;
}
ul {
margin: 0; padding: 0;
}
ul li {
float: left;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>
<img src="aaa.jpg">
</li>
<li>
<img src="ccc.gif">
</li>
<li>
<img src="aaa.jpg">
</li>
</ul>
</div>
</body>
</html>
#nav img {display:inline}
I think I read somewhere that i.e. considers images to be block elements and so will put a little space between them.
Thats works fine - provided that there are no space or line breaks between the images in the code. Otherwise, it breaks in IE. Personal preference dictates choice.
<div id="nav">
<img src="aaa.jpg"><img src="ccc.gif"><img src="aaa.jpg">
</div>
