display：inline-block和whitespace [英] display:inline-block and 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.

这篇关于display：inline-block和whitespace的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！