Spacing from outer space

I just wonder where is this space between the end of the image and the end of the li's are coming from:

http://bluesys.ch/lussy/

its just a simple UL > li > img

spacing from hell http://bluesys.ch/lussy/spacingfromhell.jpg

code:

div#slider {
    border: 5px solid #fff;
}

div#slider ul li {
    border-bottom: 1px solid pink;
}

div#slider ul li img {
    border-bottom: 1px solid green;
    margin: 0;
}

note that all margins and paddings are set to 0 by my reset.css

can someone help me out? I colored the borders that you can see the spacing i speak of. I use firefox.开发者_StackOverflow

Try setting the line-height to 0 for those images and/or LI elements. Currently you have that set to 1.4 in the body, and the img will inherit that. A brief test of setting line-height: 0 in Firebug made the images stack flush.

If you want to get rid of the gaps, you could try:

li  {
  margin-bottom: 0;
  padding-bottom: 0;
}

You may want a special class for those li elements tho, so that the CSS that gets applied doesn't do it to ALL your li elements on the site.

But, what's wrong w/ the gap? I kind of like it. Helps frame each image...

Images are inline elements just like text and by default they are positioned on the font base line leaving space for the ascender. There are different ways to stop that:

• line-height: 0 (as suggested by Robusto)
• display: block
• vertical-align: bottom