Have Geek Brain

Distance from outer space

I'm just wondering where this space between the end of the image and the end of the li comes from:

http://bluesys.ch/lussy/

its just plain UL> li> img

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

the 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 using reset.css

can anyone help me? I have painted the borders where you see the gap that I am talking about. I am using firefox.

+2


a source to share


3 answers


Try setting line height to 0 for these images and / or LI elements. You currently have 1.4 set in your body and img inherits that. A quick install test line-height: 0

in Firebug caused the image stack to flush.



+4


a source


If you want to get rid of spaces, you can try:

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


You may need a custom class for those li

tho elements so that the applied CSS doesn't do it for ALL of your elements li

on the site.

But what happened to the space? I like it. Helps crop each image ...

0


a source


Images are inline elements like text and by default they are positioned on the baseline of the font, leaving space for the clip. There are different ways to stop this:

  • line-height: 0

    (as suggested by Robusto)
  • display: block

  • vertical-align: bottom

0


a source






More articles:


All Articles