html - 为什么我的元素之间有间距？ ...和其他 CSS 问题

Question

我已经创建了一个 fiddle ，这几乎就是我正在寻找的东西，但仍然不确定几件事:

http://jsfiddle.net/LrAd3/

以下是我不理解的地方:

• 我已将图像和列表框的高度都指定为 512 像素，但它们的高度略有不同。 (编辑:我相信这是因为图像和列表框具有不同的框大小技术。调整它似乎可以解决问题。)

• 为什么图像和列表框之间有一个小间隙？ (编辑:因为 img 和 span 都是内联元素，所以空格和换行符很重要。)

• 我知道 vertical-align 在这里很重要，但我找不到很好的资源来了解它的工作原理。我知道图像、表格和其他 block 元素是不同的，但是有人有解释的引用吗？例如，我尝试用 div 包装 img 和列表框并将“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;
}

Working Fiddle

截图: