CODEWITHSUNDEEP
htmlcss
meo
meo

Reputation: 31259

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.

Upvotes: 2

Views: 226

Answers (3)

RoToRa
RoToRa

Reputation: 38441

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

Upvotes: 0

Robusto
Robusto

Reputation: 31913

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.

Upvotes: 4

kafuchau
kafuchau

Reputation: 5593

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

Upvotes: 0

Related Questions