Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IE image spacing issue

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>&nbsp;
    </div>
</body>
</html>
like image 796
Jeremy Avatar asked Feb 13 '26 16:02

Jeremy


1 Answers

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).

like image 186
buti-oxa Avatar answered Feb 15 '26 04:02

buti-oxa



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!