I have an image above a div, and IE (7, and presumably 6) insists on putting a space between the two. How can I get rid of that space?
<html>
<body>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" style="margin: 0; padding: 0;
border: solid 1px black" />
<div style="margin: 0; padding: 0; border: solid 1px green;width: 276">
<a href="#">More...</a>
</div>
</body>
</html>
Try putting your image markup and div markup on the same line. Strange, but this has worked for me in the past.
<img src="file.jpg" /><div><p>contents</p></div>
put <br> between the two. Explorer somehow implicitly puts a <p> in between, seeing that its unspecified.
Add "display: block" to image CSS.
IMG is display:inline by default, so you are getting a line of text that contains only image, and a div below it. The line of text has ascent that equals the height of the image and descent that equals descent of current font (which comes from the space between the image and the div). In strict mode, you will get descent even without the space.
So, another way to get rid of the gap is to set the descent to zero by specifying line-height:0 (on the parent element).