display:inline-block and whitespace

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

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.

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

img { float: left; }

Seems to work for me

you can also do

body
{
    line-height:0px;
}