ansaurus

Question

Answer 1

A:

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

kchau 2010-04-23 14:58:07

i gonna do an image slider with it :P the images are gonna overlap, but i have to get rid of this spaceing befor :( i already set all margins ad paddings to 0m in reset.css

meo 2010-04-23 14:59:35

Answer 2

+4 A:

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.

Robusto 2010-04-23 15:06:52

it worked! i love you! since when lineheight applies on IMG or LI's tags withount any text in it??

meo 2010-04-23 15:09:25

This worked for me also.

JYelton 2010-04-23 15:10:25

The line-height is applicable to <li>

JYelton 2010-04-23 15:10:48

why does lineheight apply on a block type object?

meo 2010-04-23 15:11:59

@meo: Images are actually inline objects (sometimes inline-block). The point is, they are subject to line-height styling.

Robusto 2010-04-23 15:20:37

Answer 3

A:

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

RoToRa 2010-04-23 15:12:12

lis are blocks by default. but thx

meo 2010-04-23 15:15:13

I meant to say to apply it to the image, not the `li`

RoToRa 2010-04-23 15:34:46

ansaurus

tags:

views:

answers:

Spacing from outer space

related questions