UA margin for img in a list?

source of margin unknown

[D_Blackwell]

A vertical menu. Each li is an image. Goal - no space between li (no vertical margin). I'm getting 4px-5px margin (Firefox and IE 6), even when margin is stripped out of everything. Negative margin will fix it: li {margin: -4px 0} (-5px for Firefox).

Another fix is to dump the list and just use some <br />.

Hacking through it is simple enough, but I'm much more interested in where this margin is coming from, and why.?

ul {
margin: 0; padding: 0;
}
li {
margin: 0; padding: 0;
}
img {
margin: 0;
}

<ul>
<li>
<img src="xx" />
</li>
<li>
<img src="xx" />
</li>
</ul>

[bedlam]

Hiya,

Have you tried defining the 'font-size' and 'line-height' of the list items?

-B

[SuzyUK]

I'm much more interested in where this margin is coming from, and why.

presuming it's not a "whitespace in lists" bug, Firefox wouldn't exhibit that anyway..

But I think here that setting the images to "display: block" and/or setting their vertical-align and line-height property should help.

Images are inline elements by default so they align themselves as per inline text. The (4-5px) gap at the bottom is the space that is left by default for descenders within text. e.g. g, p, j, y. In vertical-align terms this is the difference between baseline and bottom. As you increase the font-size, the gap will increase too.. although imperceptibly in most cases..

Here is an explanation of mysterious gaps [devedge.netscape.com] although it's written about tables it applies to all elements really, and the illustrations show the baseline/bottom thing more clearly

Suzy

[D_Blackwell]

I've already played with line-height, to no effect.

Interestingly, {font-size: 15%;} closes the space (all 4px of it) [5% Firefox] , though I don't know what to do with this info. (Seems like a red herring.)

[D_Blackwell]

SuzyUK - {display: block;} didn't work out too well, but {vertical-align: bottom;} sure did. It all snapped right into place. The font-size tip wasn't a red herring after all. I just couldn't make the connection.

A test of {vertical-align: baseline;} put things back just the way they were, with that 4-5px gap at the bottom.

You're dead-on again.

[D_Blackwell]

Turns out that img {vertical-align: bottom;} breaks pretty easily if the user changes the displayed text size. Also found a vertical gap in IE that I somehow missed earlier.

Using both font-size and line-height seems to fix it.

li {
font-size: 0; line-height: 0;
}

Thanks to you as well bedlam.