HTML line-height unwanted gaps

Question

Line-height causes gaps between images and other elements but changing its value to 0 makes any text impossible to read, is there any easy fix for that?

Imagine some repeatable DOM element like a shadow, how would you erase gap between this element and anything that is above (may be an image, div, span, button, form)?

Setting class for this .shadow and giving it line-height of 0 of course doesn't work as line-height works a bit differently.

I made 3 images, the first one shows what I'm talking about, the second one fixes it, the third one shows how the second one in fact destroyed the whole layout:

http://jsfiddle.net/J5PLf/

I'm thinking about something like:

body {
   line-height: 0;
}

p {
   line-height: 1.2em;
}

But I guess it's a bit risky, what if there will be some free text not within

tags?

Answer 1

Don't mess with the line-height propety, and set display:block at the images.

Fiddle: http://jsfiddle.net/J5PLf/1/

#example1, #example2, #example3 {
    width: 200px;
    float: left;
}
img {
    display:block;
}