display:inline-block and whitespace

Question

See this example:

http://jsfiddle.net/EwtaC/1/

The images are styled via display:inline-block. I understand that whitespace somehow has an effect on this.. (for whatever reason) So I removed the whitespace:

from <img src="" /> <img src="" />
to <img src="" /><img src="" />

This removes the spacing to the left and right of the images, but as you can see in the example, the spacing below the images remains..

Is there anything that can be done about that?

Thanks, Wesley

Answer 1

you can also do

body
{
    line-height:0px;
}

Answer 2

http://jsfiddle.net/EwtaC/2/

Add:

vertical-align:top;

Images get aligned to baseline by default. Either you display them as block and float them or need to set a proper vertical alignment.

Answer 3

Instead of inline-block, have you tried just floating the images:

img { float: left; }

Seems to work for me