CSS：下拉列表的间距问题

Question

我已经制作了一个下拉菜单：http://jsfiddle.net/QPxVe/ 出于某种原因，jsFiddle正在改变jsFiddle之外不存在的对齐 - 这不是问题。

我似乎在项目之间存在差距，我无法理解为什么要添加它。

小提琴有不同的颜色和字体，但除此之外，每个都是相同的。下图中的箭头指向问题 - 就像所有div一样。如果我将保证金设置为 主要.dropdown类的-4px，它是固定的，但我不确定为什么空间出现在第一位......

Answer 1

这是因为display:inline-block元素周围的空格（例如换行符）被渲染为空格。解决方案之一是将父元素的font-size设置为零。

请参阅http://jsfiddle.net/Kb7Fp/添加以下规则：

BODY > DIV {font-size: 0; }

Answer 2

这是因为空白（如马拉特所说）。

另一种解决方案（我觉得更方便）就是对这一行进行评论：

<div class="dropdown"><span>Rice cakes</span></div><!--
--><div class="dropdown"><span>Enemies</span>

您可以在此处查看结果：http://jsfiddle.net/EfQdX/

Answer 3

Marat有答案说明为什么有空白。

根据你的显示原因/需要：inline-block，另一个解决方案可能是添加float：left;到.dropdown规则。

喜欢这个小提琴：http://jsfiddle.net/QPxVe/2/