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

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.