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

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

回答2:

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

img { float: left; }

Seems to work for me

回答3:

you can also do

body
{
    line-height:0px;
}