CSS：下拉菜单的间距问题答案

【问题标题】：CSS: Spacing issue with dropdownCSS：下拉菜单的间距问题
【发布时间】：2012-03-07 08:51:18
【问题描述】：

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

我似乎在项目之间有一个间隙，我不明白为什么要添加它。

Fiddle 有不同的颜色和字体，但除此之外，一切都是相同的。下图中的箭头指向问题 - 所有 div 都是这样。如果我将边距设置为 -4px 主 .dropdown 类，它是固定的，但我不确定为什么首先出现空间...

【问题讨论】：

【解决方案1】：

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

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

BODY > DIV {font-size: 0; }

【讨论】：

【解决方案2】：

这是因为空格（正如 Marat 所说）。

另一个解决方案（我发现更方便）是这样注释换行符：

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

你可以在这里看到结果：http://jsfiddle.net/EfQdX/

【讨论】：

【解决方案3】：

Marat 知道为什么会有空格。

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

【讨论】：