drives me mad: a{margin-left produces margin-bottom

Forum Moderators: not2easy

Message Too Old, No Replies

drives me mad: a{margin-left produces margin-bottom

carsten888

1:12 pm on Oct 5, 2007 (gmt 0)

I have a footer with 2 images. they should be 10px apart. I used margin-left on the link (<a>) of the image (otherwise the link just stretches). But when doing this there appears a margin underneath the image.

when I take margin-left away the space under the images goes away again.

#footer{
background: red;
}

#img2{
margin-left: 10px;
}

img{
border: 0;
}

(xhtml transitional)

if you know how to fix this, please reply. It's really doing my head in.

[edited by: encyclo at 2:32 pm (utc) on Oct. 5, 2007]
[edit reason] no screenshot links please [/edit]

penders

1:52 pm on Oct 5, 2007 (gmt 0)

Hhhmmm, sounds a bit strange. It seems like your image is 'sitting on the imaginary text baseline' rather than being flush with the the bottom of the container. However, I don't see how this is related to setting margin-left?! Which browsers have you tested?

You could try setting vertical-align on your img:

img{ 
border: 0; 
vertical-align:bottom; 
}

Does that have any effect?!

pelle

1:58 pm on Oct 5, 2007 (gmt 0)

Well this is what worked when I did correct a few mistakes :-)

#footer{
background: red;
}

#img2{
margin-left: 10px;
}

img{
border: 0;
}

carsten888

3:31 pm on Oct 5, 2007 (gmt 0)

@pelle:
so you moved the id from the link to the image.

now the link is stretched, so that when you click next to the image (on the 10px left of the image) the link is still clickable, which is not what I want.

carsten888

3:34 pm on Oct 5, 2007 (gmt 0)

@penders:
in FF.

to be complete here is the entire code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test margin</title>
<style type="text/css">

#footer{
background: red;
}

#img2{
margin-left: 10px;
}

img{
border: 0;
}

</style>
</head>

<body>

</body>
</html>

penders

4:03 pm on Oct 5, 2007 (gmt 0)

The solution is to set vertical-align:bottom in the img element as suggested in my post above.

I'm not sure, however, why the margin-left property should cause this in FF. And I'm not sure why FF should do this with a Transitional DOCTYPE (I thought it was only in full standards(Strict) mode). But, the 'bottom margin' effect shows in IE6 as well, regardless of whether margin-left is set. You will only see the 'bottom margin' in Opera with a Strict DOCTYPE.

Just to expand on what I said above, images are inline elements and in standards compliant browsers they should sit on the text baseline - not the bottom of the containing line box. The gap you see beneath the image is not a margin, but the space allowed for any descenders on surrounding(imaginary) text. Another way round this is to set display:block on the img element, but then you'd need to start floating your img's as well.

carsten888

6:02 pm on Oct 5, 2007 (gmt 0)

@penders:
vertical-align:bottom;
ok, this sets the images at the bottom of the div, but now there is space above them.

its not just in FF. also IE7.

"The gap you see beneath the image is not a margin, but the space allowed for any descenders on surrounding(imaginary) text."
yes, but when you take 'margin-left' away its just images next to eachother, no space above or below, like it should in the document flow. I just realy want to know how this margin-left can cause that space.

OK, I did the option with floating the images left. Only works when the container has overflow: hidden. but thats ok.

Still think its wierd margin-left has that effect.

Thanks for replies.