white space under an image

Forum Moderators: not2easy

Message Too Old, No Replies

white space under an image

urfriend

6:04 am on Sep 8, 2007 (gmt 0)

I'm just trying to make an image, with a div right below it.
For some reason, I get some white space right below the image. I am trying to make the image touch the div. I tried using margin 0, and padding 0, but that doesn't do it.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<title>test</title>
</head>
<body>
<a href = "index.cfm" style="margin:0 0 0 0; padding: 0 0 0 0;"><img src="blah.jpg" alt="blah" style="border-style:none; margin: 0 0 0 0; padding: 0 0 0 0; line-height:0;" /></a>
<div style="background-color:blue;">
menu
</div>
</body></html>

jessejump

6:35 am on Sep 8, 2007 (gmt 0)

add
display: block
to the image

nimit

9:00 am on Sep 8, 2007 (gmt 0)

U can use <div style="margin-bottom: 0px; margin-top: 0px">
This works with IE...not sure about Opera & Netscape..

zsoly

12:05 pm on Sep 8, 2007 (gmt 0)

My test shows that only IE displays the whitespace below the image.
The solution posted by "jessejump" works, however I have discovered that if you remove the space between the code of the link and the div it also works...
e.g.:
<a href = "index.cfm" style="margin:0 0 0 0; padding: 0 0 0 0;"><img src="blah.jpg" alt="blah" style="border-style:none; margin: 0 0 0 0; padding: 0 0 0 0; line-height:0;" /></a><div style="background-color:blue;">
menu
</div>

urfriend

11:01 pm on Sep 8, 2007 (gmt 0)

zsoly, I tried removing the white space, and it worked for IE, but not firefox or opera. Plus, it kinda bothers me that I have to not indent my code to do that. I'm a big advocate of indenting code. :)

jessejump's suggestion worked for all browsers i've tested I'm still not sure what "block" means. I tried reading up on it, and this css box model stuff is confusing sometimes.

penders

6:40 pm on Sep 9, 2007 (gmt 0)

The reason why you get white-space beneath the image with a strict DOCTYPE is that images are inline elements and inline images sit on the baseline of the surrounding/imaginary text. The baseline allows for descenders (the tail of the 'g' etc.) and the white-space is the space taken up by the descenders (even if there are none!).

As mentioned by jessejump, one solution is to make the images block level elements. The other is to specify vertical-align:bottom on the images (whilst keeping them inline).

This is standards-compliant.

Another way to 'correct' this issue in FF and Opera is to use a Transitional DOCTYPE. You may be able to sort this in IE by removing the DOCTYPE entirely!? (but not recommended! ;)

On the block/inline (HTML) element front - under a strict DOCTYPE you can't have inline elements directly in the BODY. So your anchor needs to be contained in a DIV or P etc.

The W3C on block/inline:
[w3.org...]