Question

我创造了一个几乎我正在寻找的小提琴，但仍然不确定几件事情：

以下是我不理解的事情：

我已经指定图像和列表框的高度为512px，但它们的高度略有不同。（编辑：我认为这是因为图像和列表框具有不同的盒子大小调整技术。调整这似乎可以解决问题。）
为什么图像与列表框之间存在小差距？（编辑：因为img和span都是内联元素所以空格和换行很重要。）
我知道vertical-align在这里很重要，但我找不到理解其工作原理的好资料。我知道图像与表格与其他块元素不同，但有没有人有一个解释参考？例如，我尝试用div包装img和listbox并将'vertical-align'设置为顶部，但在我设置之前它没有做任何事情：

vertical-align: top;

直接在图像上。（编辑：我发现了更多关于此的信息，我相信我正确使用它。）

谢谢你看看。任何改进建议都将受到赞赏。

编辑：我相信我现在所有问题都已得到解答。谢谢你的帮助！

Answer 1

对于之间的小空间，这是因为它们被设置为inline-block，正如评论中提到的那样。如果你删除HTML代码中的物理空间，你会很好。或者，您可以将它们设为display:block和float:left，但您需要在它们之后使用clearfix。

不同高度的部分很难找到，但我追踪它。这里的问题孩子是box-sizing属性。 div具有此content-box的默认值。 select的默认值为border-box。但是，您需要三个值，以涵盖所有浏览器。

这解决了它：

select {
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
}

截图：

enter image description here

Answer 2

使用vertical align的白空间问题的另一个解决方案（虽然AndyM的答案非常好）将是将包含div的font-size设置为0px。这将消除内联元素之间的空白。当然，您需要为子元素设置不同的（正）字体大小。