display:inline-block和whitespace

display:inline-block和whitespace

问题描述:

查看此示例:

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

图片通过display:inline-block设置样式。我理解,空白以某种方式对此有影响..(无论什么原因)所以我删除了空格:

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

有什么可以做的吗?

感谢您,
Wesley

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.