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>
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With